Обычный порядок свойств CSS

Ответ 1

Нет широко принятой конвенции. Нет никакой разницы между обоими примерами, поэтому вы должны выбрать подходящее вам соглашение. Если вы действительно должны удовлетворять хобгоблинам, выберите алфавит или порядок, который влияет на модель окна.

Ответ 2

Существует, по сути, нет широко согласованной конвенции. Я предпочитаю писать Концентрический CSS, где я перечисляю свойства по порядку извне окна внутри, чтобы я мог помнить, идет ли прокладка внутри или за пределами границ и т.д. После прочтения вашего прекрасного вопроса здесь я понял, что я достаточно уверен в этом, чтобы написать сообщение в блоге, поэтому здесь вы на случай, если вам интересно:

http://rhodesmill.org/brandon/2011/concentric-css/

Обратите внимание, что популярная Box Model Convention неправильно выполняет порядок. Фактический CSS-рендеринг выполняется в этом порядке, извне внутрь:

+-------------------+
|                   |
|      margin       |
|                   |
|  +---border----+  |
|  |             |  |
|  |(background  |  |
|  |    color)   |  |
|  |             |  |
|  |   padding   |  |
|  |             |  |
|  |  +-------+  |  |
|  |  | height|  |  |
|  |  |   ×   |  |  |
|  |  | width |  |  |
|  |  +-------+  |  |
|  +-------------+  |
+-------------------+

Что предлагает естественный порядок для вашего CSS:

margin / border / background / padding / height × width

Вместо этого "Кодовая модельная конвенция" использует этот довольно странный порядок:

height × width / margin / padding / border / background

Ответ 3

Я не верю, что порядок свойств будет иметь какое-либо влияние на конечный результат, если два таких свойства не называются

border:1px solid #000;
border-top:none;

против

border-top:none;
border:1px solid #000;

Кроме того, все, что вам будет легче читать, было бы лучшим выбором. Я перечисляю их в алфавитном порядке, поскольку это имеет тенденцию группировать подобные свойства вместе.

Ответ 4

Я видел несколько руководств, которые говорят, что они должны быть в алфавитном порядке. Итак, ваш второй пример.

Существуют такие инструменты, как CleanCSS, которые могут их алфавит для вас.

Ответ 5

Я обычно помещаю свойства в алфавитном порядке, таким образом, когда вы просматриваете сильно заполненное правило CSS со многими свойствами, вам немного легче найти то, что вы ищете.

Ответ 6

Не совсем.

Но было бы целесообразно упорядочить алфавитные и/или групповые правила шрифта и правила box/layout. Ваш код будет более понятным.

Пример:

/* font */
color: blue; font-size: 12px; word-wrap: break-word;
/* layout */
border: 1px solid red; border-bottom: none; margin-top: 6px; padding: 4px 6px;

Ответ 7

Основной проблемой упорядочения с CSS является порядок классов, а не свойства. Поскольку каскады stylesheets, более конкретная таблица стилей победит. Я склонен группироваться в несколько алфавитном порядке, с возможными исключениями для подобных свойств, которые принадлежат друг другу, независимо от алфавитного порядка.

Ответ 8

Нет стандартного набора. Некоторые люди предпочитают в зависимости от уровня OCD. Мне нравится сначала делать высоту, затем позиционирование, цвета и т.д. Я видел, как люди шутили о том, что корпоративный CSS заказывается на основе количества символов. По крайней мере, я думаю, они шутили.