Как называть классы в html

Результат применения классов к тегам и показан на рис. 8.2.

Рис. 8.2. Вид тегов, оформленных с помощью классов

Классы удобно использовать, когда нужно применить стиль к разным элементам веб-страницы: ячейкам таблицы, ссылкам, абзацам и др. В примере 8.3 показано изменение цвета фона строк таблицы для создания «зебры».

Пример 8.3. Использование классов

HTML5 CSS 2.1 IE Cr Op Sa Fx

        АлмазАметистСапфир
Название
Цвет
Твердость по Моосу
 
 
Белый
10
 
 
Рубин
Красный
9
 
 
Голубой
7
 
 
Изумруд
Зеленый
8
 
 
Голубой
9
 
 
  

Рис. 8.3. Результат применения классов

Одновременное использование разных классов

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

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

Пример 8.4. Сочетание разных классов

HTML5 CSS 2.1 IE Cr Op Sa Fx

        
Paint.NET Photoshop цвет фон палитра слои свет панели линия прямоугольник пиксел градиент 
  

Результат данного примера показан на рис. 8.4.

Рис. 8.4. Облако тегов

В стилях также допускается использовать запись вида .layer1.layer2 , где layer1 и layer2 представляют собой имена классов. Стиль применяется только для элементов, у которых одновременно заданы классы layer1 и layer2 .

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

1. Какое имя класса написано правильно?

1. 2layer1
2. 1layer
3. Яndex
4. pink-floyd
5. 28_days_later

2. Какой цвет будет у слова «потока» в коде?

При использовании следующего стиля?

1. Зелёный.
2. Синий.
3. Жёлтый.
4. Оранжевый.
5. Чёрный.

1. div[iddqd]
2. div.iddqd
3. iddqd.div
4. div#iddqd
5. div=iddqd

4. Какое имя класса следует добавить к тегу , чтобы текст был одновременно жирным и красного цвета, если имеется следующий стиль?

Как называть css-классы

Основываясь на моих любимых статьях по данной теме и личном опыте, вот мои 5 копеек о том, как называть CSS-классы.

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

Если это поле, используйте элемент input

Читать HTML-документ будет гораздо легче.

Пример:

1. Назначайте классы как можно ниже по DOM-дереву

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

Пример:

 
Lorem ipsum
 

main.mainly p < /* Не делайте этого */ >/* Вместо этого присвойте название класса p : */ .paragraphly

Источник: Крис Койер

2. Называйте классы по содержимому

Пример:

.c-header-logo < /* Просто прочитав это название, я догадался, что этот селектор указывает на лого в шапке. */ >

Источник: phpied.com

3. Не называйте класс по содержимому, если картинка нагляднее

Скажем, лого шапки на самом деле выглядит так:

Тогда не называйте его header-logo.

.guillotine < /* О, сразу видно, что мы хотим стилизовать */ >

4. Попробуйте суффикс -like для лучшей переносимости кода.

h3, .h3-like < /* какое-то оформление */ >

Источник: KNACSS v4

5. Не используйте верблюжийРегистр

Это затрудняет чтение

Пример:

.navToOneModuleICreated < font-size:2em; >/* против */ .nav-to-one-module-i-created

6. Пробуйте БЭМ

На сегодняшний день это одно из самых популярных соглашений.

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

(двойной дефис) означает вариант элемента.

(двойное подчёркивание) означает дочерний элемент.

Пример:

.btn--warning < /* Ура! По соглашению я знаю, что код относится к варианту кнопки «warning», даже не заглядывая в HTML-код. Какое облегчение! */ >.btn__text < /* По той же причине я знаю, что эти стили предназначаются для текста в кнопке */ >

7. Пробуйте ещё страшнее

БЭМ открывает новые возможности, даже если поначалу их соглашения выглядят мерзко.

Тем не менее, такая своеобразность помогает глазу моментально уловить суть происходящего, и в случае БЭМ, поверьте, это работает.

Теперь можете пробовать более мерзкое соглашение, пока вы придерживаетесь его на всём проекте.

Пример:

.DIMENSIONS_OF_mycomponent < /* Куда ещё противнее. Зато теперь понятнее, о чём речь. */ /* Я использую его для классов-заготовок в SASS. */ /* Но всё же не злоупотребляйте этим правилом. */ >

8. Не сокращайте описывающие слова

Помимо уже устоявшихся nav , txt , url … следует избегать любых аббревиатур.

Источник: phpied.com

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

В случае визуального компонента начинайте с c- , а в случае объекта (напр. макет) — с o- , мне просто нравится этот трюк Гарри Робертса.

Пример:

10. Пробуйте [] , когда слишком много классов одного типа

Этот небольшой трюк помогает быстрее изучить HTML. Заметьте, в CSS-файле нет классов .[ и .] , они нужны только здесь, чтобы помочь другим читать HTML.

Пример:

11. Используйте префикс js- , если он используется только для JavaScript

Если Javascript требуется выбрать элемент, не полагайтесь на CSS-стили. Задайте специальный префикс вроде js- .

Пример:

12. Старайтесь отделить родительский элемент от дочернего

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

Пример:

13. Несемантические классы должны явно описывать свои свойства.

Большинство из них содержат только одно свойство, и незачем его скрывать.

.horizontal-alignment < /* Не делайте этого. Выровнять по горизонтали можно разными способами, но при виде этого селектора в HTML-файле совершенно не ясно, КАК ИМЕННО это сделано. */ text-align: center; >/* Предпочитайте этот способ. Смотрите выше про использование БЭМ и односимвольного префикса */ .u-text-align--center

14. Явные хаки (I)

Если вы не довольны вашем CSS-селектором, скажите это всем.

Это произойдёт в любом случае, даже с лучшими CSSупергеро(ин)ями, поэтому не стыдитесь этого.

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

Лично я использую слово «HACK», потому что IDE Atom его автоматически подсвечивает.

Пример:

.my-component < margin-left: -7px; /* ХАК здесь: магическое число, нужное, чтобы компенсировать пробел */ >

15. Явные хаки (II)

Еще толковый вариант — собрать весь код со «странностями» в отдельный файл, shame.css

Опять же, Гарри Робертс подсказал

16. Старайтесь избегать более двух слов для одного имени

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

Пример:

.button < /* Хорошо */ >.dropdown-button < /* Всё ещё хорошо */ >.dropdown-button-part-one < /* Хм, по-прежнему хорошо, но будет нечитаемым при добавлении дочернего элемента, например: */ >.dropdown-button-part-one__button-admin < /* Ой, всё. */ >

17. Используйте атрибут data-state для указания состояния компонента

Манипуляция состоянием — далеко не редкость. Это происходит насколько часто, что специальный атрибут для состояния экономит время и силы в долгосрочной перспективе.

Пример:

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

18. Используйте префиксы has- или is- для состояния

Манипуляция состоянием происходит очень часто (ещё раз). Поэтому придерживаться строгого соглашения наименования для состояния будет очень полезно.

Пример:

.activated < /* Не делайте этого. Я не совсем понимаю, о чём вы говорите? */ >.is-activated < /* Да, вы оформляете состояние. */ >

19. Используйте дефис в качестве префикса при сочетании нескольких состояний

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

Пример:

Источник: Бен Смифет

20. При объявлении селектора в HTML придерживайтесь одиночных кавычек вместо двойных

Это упрощает чтение документа.

Пример:

Источник: я узнал это, когда работал с командой Predicsis

21. Не следуйте правилам

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

Я не говорю, что всё это пригодится и в вашем случае, поэтому мой наилучший совет:

1) Постарайтесь улучшать своё именование классов, 2) соблюдайте его последовательно для данного проекта, 3) но избегайте переусложнения.

Если правило вам не подходит, просто пропустите его

Особая благодарность @HugoGiraudel, @kaelig и @gaetanbt за их отзывы.

как оглавлять классы в html

у меня вопрос
как оглавлять классы div в html
Допустим верхнюю часть страницы мы называем
Нижнюю
есть ли полный список названий дивов?

2 ответов

Обычно идет именование по смыслу, если новости, то можно назвать блок news. А сами названия тегов и классов зависит от спецификаций — html5 или html4. В html4 можно написать , в html5 можно написать . В общем нужно по смыслу называть class.

сначало шапка далее внутри которого можно вписать скоко угодно классов, можно придумывать по подходящему смыслу контента. и в конце