Какой правильный синтаксис css

Базовый синтаксис CSS

Как уже было отмечено ранее, стилевые правила записываются в своём формате, отличном от HTML. Основным понятием выступает селектор — это некоторое имя стиля, для которого добавляются параметры форматирования. В качестве селектора выступают теги, классы и идентификаторы. Общий способ записи имеет следующий вид.

Базовый синтаксис CSS

Вначале пишется имя селектора, например, TABLE , это означает, что все стилевые параметры будут применяться к тегу <table> , затем идут фигурные скобки, в которых записывается стилевое свойство, а его значение указывается после двоеточия. Стилевые свойства разделяются между собой точкой с запятой, в конце этот символ можно опустить.

CSS не чувствителен к регистру, переносу строк, пробелам и символам табуляции, поэтому форма записи зависит от желания разработчика. Так, в примере 5.1 показаны две разновидности оформления селекторов и их правил.

Пример 5.1. Использование стилей

HTML5 CSS 2.1 IE Cr Op Sa Fx

В данном примере свойства селектора h1 записаны в одну строку, а для селектора h2 каждое свойство находится на отдельной строке. Во втором случае легче отыскивать нужные свойства и править их по необходимости, но при этом незначительно возрастает объем данных за счёт активного использования пробелов и переносов строк. Так что в любом случае способ оформления стилевых параметров зависит от разработчика.

Правила применения стилей

Далее приведены некоторые правила, которые необходимо знать при описании стиля.

Форма записи

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

Пример 5.2. Расширенная форма записи

Однако такая запись не очень удобна. Приходится повторять несколько раз один и тот же селектор, да и легко запутаться в их количестве. Поэтому пишите все свойства для каждого селектора вместе. Указанный набор записей в таком случае получит следующий вид (пример 5.3).

Пример 5.3. Компактная форма записи

Эта форма записи более наглядная и удобная в использовании.

Имеет приоритет значение, указанное в коде ниже

Если для селектора вначале задаётся свойство с одним значением, а затем то же свойство, но уже с другим значением, то применяться будет то значение, которое в коде установлено ниже (пример 5.4).

Пример 5.4. Разные значения у одного свойства

В данном примере для селектора p цвет текста вначале установлен зелёным, а затем красным. Поскольку значение red расположено ниже, то оно в итоге и будет применяться к тексту.

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

Значения

У каждого свойства может быть только соответствующее его функции значение. Например, для color , который устанавливает цвет текста, в качестве значений недопустимо использовать числа.

Комментарии

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

Чтобы пометить, что текст является комментарием, применяют следующую конструкцию /* . */ (пример 5.5).

Пример 5.5. Комментарии в CSS-файле

Как следует из данного примера, комментарии можно добавлять в любое место CSS-документа, а также писать текст комментария в несколько строк. Вложенные комментарии недопустимы.

Вопросы для проверки

1. Люба подключила к HTML-документу одновременно два стилевых файла — style1.css и style2.css. Причём в файле style2.css первой строкой импортируется еще один файл с именем style3.css. В файле style1.css цвет текста задается красным, в style2.css — синим, а в style3.css — зелёным. Какой цвет текста будет на странице?

Синтаксис CSS

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

Правила CSS

CSS представляет из себя правило или набор правил, описывающих форматирование (изменение внешнего вида) отдельных элементов на веб-странице. Правило, состоит из двух частей: селектора и следующим за ним блоком объявлений. На изображении ниже показана структура (синтаксис) правила:

синтаксис css свойств

    Первым всегда указывается селектор, он сообщает браузеру, к какому элементу или элементам веб-страницы будет применен стиль.

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

Оформление кода

Браузер игнорирует большинство пробельных символов в CSS-коде, поэтому их можно использовать с пользой для себя, придавая коду удобочитаемый вид. К пробельным символам относятся: символы табуляции, перенос строки и обычные пробелы, их можно использовать в любом количестве. Пробельные символы можно ставить между селектором и блоком объявлений, в самом блоке объявлений — между фигурной скобкой и свойством, между свойствами, свойством и значением.

В примере представлен CSS-код, в котором используются пробельные символы:

Пробельные символы в основном используют, когда в правиле указывается много свойств, чтобы легче было прочитать и представить, что именно делает тот или иной стиль. Код предыдущего примера можно написать и в одну строку, не используя пробельных символов, но такой код будет менее удобен для чтения и понимания:

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

CSS GuideLines, часть 1. Синтаксис и форматирование

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

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

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

Синтаксис и форматирование

Один из простейших видов руководств по оформлению кода (далее — стайлгайдов, прим. переводчика) — это набор правил касательно синтаксиса и форматирования. Наличие правил по оформлению CSS-стилей означает то, что код всегда будет понятен всем членам вашей команды.

Чистый код дарит ощущение чистоты. С чистым кодом намного приятнее работать, такой код подталкивает других членов команды также соблюдать стандарты написания кода. Грязный код ужасен и отвратителен, с ним никому не захочется работать.

  • 4 пробела для отступов. Именно пробелы, а не таб;
  • Строки не длиннее 80 символов;
  • Мультистрочный CSS;
  • Эффективное использование пустого пространства.
Разбиение на несколько файлов

После стремительного роста популярности CSS-препроцессоров многие разработчики стали чаще разбивать свой CSS-код на отдельные файлы. Даже если вы не используете препроцессоры, было бы хорошо поместить самостоятельные части кода в отдельные файлы, а затем соединять их в один файл при сборке проекта (например, с помощью Grunt или Gulp).

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

Таблица содержимого

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

Например, самый простой вариант оглавления — добавить название раздела и его описание:

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

Ширина строки в 80 символов
  • Возможность держать перед собой сразу несколько открытых файлов, размещенных друг возле друга;
  • Возможность просматривать CSS на таких сайтах, как Github, или в окне терминала;
  • Обеспечение комфортной длины строки для добавления комментариев.

Следует отметить, что есть и исключения для этого правила — например, строки с длинными URL-адресами.

Именование секций кода

Каждый крупная секция CSS-кода должна начинаться так:

Добавление символа "#" в начале названия секции позволит нам выполнять поиск по файлу намного быстрее. Есть вероятность того, что запрос «SECTION TITLE» вернет много результатов, в то время как запрос с решеткой в начале вернет нам только один нужный результат. Также стоит оставлять пустую строку между названием секции и первым селектором.

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

Анатомия CSS-правил

Прежде чем поговорить о том, как разработчикам следует писать CSS-правила, давайте уточним используемую терминологию:

  • Связанные селекторы на одной строке, несвязанные селекторы на разных строках;
  • Пробел перед открывающей скобкой ( <);
  • Свойства и их значения на одной строке;
  • Пробел после двоеточия, относящегося к свойству;
  • Каждое объявление свойства и его значения на новой строке;
  • Открывающая скобка находится на той же строке, что и последний селектор;
  • Первое объявление свойства находится на новой строке после открывающей скобки;
  • Закрывающая скобка находится на отдельной строке:
  • Каждое объявление имеет отступ в 4 пробела;
  • Точка с запятой находится сразу после значения свойства, без пробела.

Таким образом, пример ниже будет являться неправильным:

  • Табы вместо пробелов;
  • Несвязанные селекторы на одной строке;
  • Открывающая скобка на отдельной строке;
  • Закрывающая скобка на той же строке, что и последнее объявление;
  • Точка с запятой (кстати говоря, необязательная именно в последнем объявлении) в конце последнего объявления не стоит;
  • Нет пробелов после двоеточий.
Мультистрочный CSS
  • Снижение риска появления конфликтов при слиянии объявлений за счет того, что каждое объявление находится на отдельной строке;
  • Более надежные и читаемые diff’ы, потому что одна строка несет только одно изменение.
  • Они по-прежнему соответствуют правилу об одном изменении на одной строке;
  • Они достаточно похожи друг на друга, чтобы объединить их в один блок кода; их не надо читать с той же тщательностью, что другие самостоятельные правила.
Отступы

Так же, как вы делаете отступы для объявлений, делайте и отступы у связанных наборов правил:

Благодаря этому разработчик сразу увидит, что .foo__baz располагается внутри .foo__bar, который, в свою очередь, находится внутри .foo. Такой способ имитации DOM многое рассказывает разработчикам о том, где класс располагается, благодаря чему не приходится каждый раз открывать разметку и искать нужный кусок кода.

Отступы в Sass

Sass предоставляет возможность вкладывать правила друг в друга. Это означает, что написав такой scss-код:

… мы получим следующий скомпилированный CSS:

Работая с Sass, следует использовать те же 4 пробела для отступов, а также оставлять пустую строку перед и после вложенных правил. К слову, вложенности в Sass следует избегать. Об этом еще будет сказано в следующих частях.

Выравнивание

По возможности, выравнивайте схожие строки со свойствами:

Это в разы упрощает жизнь разработчикам, чьи текстовые редакторы поддерживают редактирование нескольких строк одновременно.

Разумное использование пустого пространства
  • Одну пустую строку между связанными наборами правил;
  • Две пустые строки между несвязанными наборами правил;
  • Пять пустых строк между секциями.

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

HTML

Учитывая тесную связь между HTML и CSS, с моей стороны было бы неправильно не оговорить некоторые моменты относительно разметки.

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

Этот код будет работать:

Но предпочтительно использовать такой код:

При записи нескольких значений в атрибут, разделяйте эти значения двумя пробелами:

Когда несколько классов связаны друг с другом, рассмотрите способ их обрамления в скобки:

Это не строгая рекомендация, и я все еще тестирую это в своих проектах, но такой способ влечет за собой ряд преимуществ. Подробнее об этом читайте в статье «Группирование связанных классов в разметке».

Как и в случае с нашими табилцами стилей, в разметке тоже можно использовать пустое пространство. Например, почему бы не разделять важные секции контента пятью пустыми строками:

Разделяйте независимые, но близко связанные части разметки одной пустой строкой:

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *