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

Правила оформления CSS-кода

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

Хорошо: после каждого значения стоит точка с запятой Плохо: после первого свойства пропущена точка с запятой

1.2 Для отступов внутри правил используйте два пробела

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

1.3 Значение цветов не сокращается

Если цвет задан в шестнадцатиричной системе, то значение не сокращается, а пишется полностью код из всех шести символов. Для записи используйте строчные буквы. Например, #e3e3e3 .

1.4 Все пишется строчными буквами

Вce названия тегов и свойства пишутся строчными буквами.

1.5 Нули не пропускаются

Если число дробное и начинается с нуля, то он не опускается (например, .5 вместо 0.5 ).

1.6 Используйте двойные кавычки

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

1.7 Пробел после двоеточия

В правилах после двоеточия ставится один пробел ( top: 10px; ). При этом перед двоеточием пробел не нужен.

1.8 Пробелы после запятой в цветах

После запятых внутри значений rgb() , rgba() , hsl() , hsla() или rect() пробелы ставятся. Это улучшает читаемость.

1.9 Пробел до и после комбинатора

Между селекторами до и после комбинатора (например, p&nbsp>&nbspa ) ставится один пробел.

1.10 Каждое свойство с новой строки

Одно свойство — одна строка. Каждое объявление в правиле пишется на новой строке.

1.11 Пробел перед фигурной скобкой

После селектора и перед открывающейся фигурной скобкой ставится один пробел. После открывшейся скобки запись идёт с новой строки.

1.12 Закрывающая фигурная скобка на новой строке

Закрывающая фигурная скобка после набора свойств пишется на новой строке и без отступа. Она должна быть на одном уровне с селектором. Следующее после этого правило отделяется пустой строкой.

1.13 Опускайте единицы измерения

Единицы измерения не нужно писать там, где без них можно обойтись. Например, border:&nbsp0 .

2. Порядок свойств

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

  1. Позиционирование
  2. Блочная модель
  3. Типографика
  4. Оформление
  5. Анимация
  6. Разное

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

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

Сгруппированные свойства в правиле отделяются друг от друга пустой строкой.

Порядок объявления подробных правил, таких как font-size , font-family , line-height , должен соответствовать порядку в сокращённой версии правила. В случае совместного использования подробных и сокращённых правил, первой должна идти сокращённая версия.

3. Имена классов

  • Имена классов пишутся строчными буквами, между несколькими словами используется дефис (но не знак нижнего подчёркивания или camelCase). Дефисы служат разделителями во взаимосвязанных классах (например, .button и .button-cancel ).
  • Имена должны быть такими, чтобы по ним можно было быстро определить, какому элементу на странице задан класс: избегайте сокращений (единственное исключение — .btn для кнопок), но не делайте их слишком длинными (не более трёх слов).
  • Для именования классов используются английские слова и термины. Не используйте транслит для названия классов и атрибутов.

4. Правило @import

Правило @import работает медленнее, чем тег <link> . В стилях @import использовать не желательно.

5. Варианты шрифта

Альтернативные варианты шрифта и тип семейства указываются в конце перечисления значений font-family.

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

Стандарты названий css классов и id

Для форматирования элементов на web-странице, web-мастера создают имена классов и id которыми идентифицируют контейнеры. Свойства css селекторов должны в точности соответствовать свойствам XHTML тегов, для которых они предназначены, а вот названия классов и идентификаторов зависят только от web-мастера, создающего эти классы. Однако при выборе названия классов и идентификаторов web-мастера не должны полностью полагаться на свою изобретательность. Хоть и не существует четких правил для имен классов и id, все же существует ряд рекомендаций, направленных на достижение структурированности названий для уменьшения путаницы.

В этой статье мы рассмотрим эти рекомендации, а также увидим на какие виды делятся названия в css.

Обозначающие расположение.

При создании Web-страниц необходимо определять названия контейнеров на странице указывающие на расположение контейнера. Вот очень хорошие название классов:

  • top-panel
  • horizontal-nav
  • left-side
  • center-column
  • right-col

Все эти названия валидны для использования в CSS и XHTML. Они являются простыми и четко описывают расположение контейнера и выполняют свою миссию — идентифицируют элемент страницы.

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

Структурные (описывающие действия).

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

  • branding
  • main-nav
  • subnav
  • main-content
  • sidebar

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

Общие названия.

Проанализировав названия CSS большого количества сайтов, мы выбрали названия которые очень часто встречались в разных сайтах. Вот самые общие названия классов:

  • header
  • content
  • nav
  • sidebar

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

Именования классов css

alt="Именования классов css" width="300" height="92" />В этой статье я расскажу как более правильно называть классы css так чтобы не путаться в своем-же коде. Цель инструкции — исключить возможность конфликтов имен, упрощения отладки, обслуживания и процесса присвоения названий.

Несколько правил:

  • Используйте строчные буквы в названиях всех CSS-классов.
  • Для разделения слов в имени используйте символ «-». Например, мы можем назвать классы как-то вроде news-last.
  • Используйте английские названия классов, не в коем случае не используйте русские или другие языки.
  • В классах можно использовать цифры, но они должны идти после какого-либо названия, к примеру news-2
  • Используйте стандартные названия классов для главных разделов сайта таких как: шапка сайта (header), левая часть сайта (sidebar), тело сайта(content), нижняя часть сайта(footer), меню(navigation) и так далее.

Выполняя все инструкции у вас получится более понятные классы для понимания других разработчиков. Не забывайте, что вы можете комбинировать классы к примеру news-selected (выделенная новость)&#8230;

Как многие знают, сейчас есть популярный способ наименований классов методологией БЭМ. Лично я ее использую так как она хорошо гармонирует с SASS, и мне нравится как так все устроено

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

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