CSS ">" vs ">"?
В CSS .a > .b совпадает с .a>.b, но какая из этих двух является более правильной нотации? Я вижу, что в инструментах разработчика Chrome используется 2-й вариант
В принципе, если вы хотите, чтобы ваш код был легко читаемым, используйте:
.a > .b
Однако, если вы хотите, чтобы таблица стилей загружалась быстрее (хотя и не намного быстрее), вы можете использовать:
.a>.b
Ничто не является "более правильным"; оба они одинаково действительны. Единственная вещь, о которой говорит 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, является вопросом стиля кодирования, и это по-прежнему технически обосновано, даже если оно не одобрено.
Первый предпочтительнее для читаемости, но это необязательно, компилятору не важно, кроме того, что во втором он имеет меньше символов.
Я могу заверить вас, что все люди предпочитают первую версию, потому что это делает наши задания намного проще, а компьютеры предпочитают второй, но только немного. Я бы рекомендовал использовать только второй вариант, если вы минимизируете свой CSS только при развертывании на реальном сайте, так как это позволит сэкономить время для всех разработчиков, работающих с ним.
Единственное преимущество второй нотации - дополнительное сохранение нескольких байтов путем удаления избыточного пробела. Как правило, это также будет конечным результатом минимизации CSS.
