CSS ">" vs ">"?

114
14

В CSS .a > .b совпадает с .a>.b, но какая из этих двух является более правильной нотации? Я вижу, что в инструментах разработчика Chrome используется 2-й вариант

спросил(а) 2014-05-10T16:53:00+04:00 6 лет, 9 месяцев назад
1
Решение
87

В принципе, если вы хотите, чтобы ваш код был легко читаемым, используйте:


.a > .b

Однако, если вы хотите, чтобы таблица стилей загружалась быстрее (хотя и не намного быстрее), вы можете использовать:


.a>.b

ответил(а) 2014-05-10T16:56:00+04:00 6 лет, 9 месяцев назад
130

Ничто не является "более правильным"; оба они одинаково действительны. Единственная вещь, о которой говорит spec, состоит в том, что пробелы, окружающие комбинаторы, являются необязательными (основное внимание):


Комбинаторы: пробелы, "больше, чем знак" (U + 003E, >), знак "плюс" (U + 002B, +) и "тильда" (U + 007E, ~), Может появиться пробел между комбинатором и простыми селекторами вокруг него. Только символы "пробел" (U + 0020), "вкладка" (U + 0009), "строка" (U + 000A), "пробел каретки" (U + 000D) и "подача формы" (U + 000C) могут возникать в пробеле. Другие космические символы, такие как "em-space" (U + 2003) и "идеографическое пространство" (U + 3000), никогда не являются частью пробелов.



Обратите внимание, что сам компоновщик потомка представлен символом пробела; если единственными символами, окружающими два составных селектора, являются пробельные символы, тогда они рассматриваются как комбинатор потомков. В вашем примере дочерний комбинатор > может быть окружен пробелом или нет; нет никакой разницы.

Вы можете увидеть пример синтаксиса как пробела, так и без пробелов в самой спецификации, по совпадению также в разделе, посвященном детскому комбинатору >. Обратите внимание, опять же с упором на то, что спецификация даже явно указывает, где пробелы опущены, чтобы продемонстрировать, что на самом деле это полностью необязательно:


Примеры:

Следующий селектор представляет элемент p, который является дочерним элементом body:


body > p

В следующем примере объединены компиляторы потомков и дочерние комбинаторы.


div ol>li p

Он представляет элемент p, который является потомком элемента li; элемент li должен быть дочерним элементом элемента ol; элемент ol должен быть потомком div. Обратите внимание, что дополнительное пространство вокруг комбинатора " > " не указано.



Как упоминалось другими, при написании CSS, пробелы хороши для целей удобочитаемости; если размер файла вызывает озабоченность, подумайте о том, чтобы минимизировать и/или сжать таблицу стилей во время пост-продакшн (для вас обычно указывается незначительная пробел, который может содержать пробелы вокруг комбинаторов). Единственная причина, по которой вы решили не использовать пробелы при создании CSS, является вопросом стиля кодирования, и это по-прежнему технически обосновано, даже если оно не одобрено.

ответил(а) 2014-05-10T18:44:00+04:00 6 лет, 9 месяцев назад
95

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

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

ответил(а) 2014-05-10T16:55:00+04:00 6 лет, 9 месяцев назад
85

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

ответил(а) 2014-05-10T16:55:00+04:00 6 лет, 9 месяцев назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема