Css классы – Селекторы тега, класса (class), Id и универсальные, а так же селекторы атрибутов в современном CSS

Leave a Comment / Css / By /

Содержание

Как работают в css классы и идентификаторы?

Как работают в CSS классы и идентификаторы

От автора: в css классы и идентификаторы позволяют привязать стили к любым элементам, но суть их работы немного отличается друг от друга. Как они работают и каковы особенности их применения?

Стилевые классы

Классы – это наиболее часто используемые селекторы в css. В большинстве случаев прописывание стилей различным элементам идет через них. Все потому, что class, в отличие от id, можно задавать многим тегам, поэтому он может быть применен для стилизации целой группы блоков. Например:

.center-wrap{ max-width: 960px; margin: 0 auto; }

.center-wrap{

max-width: 960px;

margin: 0 auto;

}

Теперь какому бы блоку мы ни прописали class center-wrap, он получит максимальную ширину в 960 пикселей и будет центрирован. И мы можем прописать его и для шапки, и для контента, и для футера.

Как работают в CSS классы и идентификаторы

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

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

Как работают в CSS классы и идентификаторы

Несколько классов: как это работает?

Стилевые классы имеют еще одну особенность – их можно задавать несколько одному html-элементу. Даже не несколько, а бесконечное количество, тут никаких ограничений нет. Например:

<div class = «red transform m-size»></div>

<div class = «red transform m-size»></div>

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

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

<div class = «first two»></div>

<div class = «first two»></div>

.first{ Color: red; } .two{ Color: green; }

.first{

Color: red;

}

.two{

Color: green;

}

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

Как работают в CSS классы и идентификаторы

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Идентификаторы

Наверняка вы зарегистрированы в какой-нибудь соц. сети? У вашему аккаунта там гарантированно есть какой-то id. Правда это не имеет ничего общего с css-идентификаторами, но общая их особенность вот в чем – id может быть только одним для одного конкретного элемента.

Нельзя задавать более 1 id одному элементу, а также нельзя давать один и тот же идентификатор двум разным элементам. Задается он с помощью атрибута id.

Как работают в CSS классы и идентификаторы

Из этого всего становится понятно, что идентификатор предназначен для стилизации одного конкретного элемента. Обычно он применяется по отношению к крупным элементам сайта. Например, к шапке (header), блоку контента (content), футеру (footer). То есть это те элементы, которые присутствуют на любом сайте в единственном числе и не повторяются. Также это может быть главная навигация, боковая колонка, форма комментариев и т.д.

Приоритетность в стилях

Если говорить о приоритетности в css, то тут идентификатор берет верх над классом. Давайте рассмотрим пример:

<div class = «green» id = «brown»></div>

<div class = «green» id = «brown»></div>

У нас есть 1 блок. Мы задали ему класс и идентификатор. Пропишем стили:

.green{ color: green; } #brown{ color: brown; }

.green{

color: green;

}

#brown{

color: brown;

}

Какого цвета будет текст в блоке: зеленого или коричневого? Коричневого. И не потому, что идентификатор стоит в таблице стилей дальше класса. В данном случае это неважно, можно было бы поставить его перед, но результат все равно был бы таковым. Все потому, что идентификатор можно задать только 1. Соответственно, это очень точная характеристика элемента.

Дело в том, что для браузера чем точнее селектор, тем он является более приоритетным для выполнения записанных в нем свойств. Например, возьмем простой селектор тега – p. Он обращается ко всем абзацам на странице. Очень широкий селектор, так как абзацев очень много.

Но давайте попробуем селектор p.right{}. Он уже обратится только к тем абзацам, которые имеют класс right. То есть их может быть на самом деле много, но в любом случае их будет меньше, чем абзацев всего.

А теперь обратимся, допустим, к селектору #p-text. Он очень точный, так как выберет всего 1 элемент, у которого имеется этот идентификатор. Соответственно, вы можете привязать к элементу хоть 7 классов и прописать в них стили, но идентификатора хватит, чтобы все нужные стили переопределить.

Подытоживаем

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

Стилевой класс вы можете использовать как для стилизации группы элементов, так и для одного. Идентификатор же используется строго для одного элемента. Если вы попробуете один и тот же id прописать двум элементам, то это не сработает. Также нельзя одному элементу определять более одного идентификатора – это уникальная метка, которая может быть только в одном числе.

Если мы говорим о приоритетности, то id приоритетнее класса, но тот, в свою очередь, приоритетней обычных селекторов тегов.

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

Как работают в CSS классы и идентификаторы

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее Как работают в CSS классы и идентификаторы

PSD to HTML

Верстка сайта на HTML5 и CSS3 с нуля

Смотреть

Классы | htmlbook.ru

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
3.07.0+1.0+3.5+1.0+1.0+1.0+1.0+

Версии CSS

CSS 1CSS 2CSS 2.1CSS 3

Описание

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

Синтаксис

E.Имя_класса { Описание правил стиля }
.Имя_класса { Описание правил стиля }

Здесь E — обозначает любой тег. Имена классов должны начинаться с латинского символа и могут содержать в себе символ дефиса (-) и подчеркивания (_). Использование русских букв в именах классов недопустимо. Чтобы указать в коде HTML, что тег используется с определенным классом, к тегу добавляется атрибут class.

Пример

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Классы</title>
  <style>
   p { /* Обычный абзац */ 
    text-align: justify; /* Выравнивание текста по ширине */
   } 
   p.cite { /* Абзац с классом cite */
    color: navy; /* Синий цвет текста */
    margin-left: 20px; /* Отступ слева */
    border-left: 1px solid navy; /* Граница слева от текста */
    padding-left: 15px; /* Расстояние от линии до текста */
   } 
  </style>
 </head> 
 <body>
  <p>Для искусственного освещения помещения применяются люминесцентные лампы. 
     Они отличаются высокой световой отдачей, продолжительным сроком службы, 
     малой яркостью светящейся поверхности, близким к естественному спектральным 
     составом излучаемого света, что обеспечивает хорошую цветопередачу.</p>
  <p>Для исключения засветки экрана дисплея световыми потоками 
     оконные проемы снабжены светорассеивающими шторами.</p>
 </body>
</html>

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

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

Браузеры

В Internet Explorer до версии 7.0 классы не работают, если их имена начинаются с дефиса (-) или символа подчеркивания (_).

Различные методы использования классов в CSS

Автор: Александр Побединский

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

.имя_класса { свойство1: значение; свойство2: значение; ... свойствоN: значение;}

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

Тег.Имя класса { свойство1: значение; свойство2: значение; ... свойствоN: значение;}

Имена названий классов могут содержать латинские буквы, целые числа от 0 до 9, а также знаки дефиса (-) и подчеркивания (_). Названия классов могут начинаться только с буквы или подчеркивания. Чтобы присвоить к какому-нибудь тегу определенный класс достаточно к тегу HTML добавить атрибут class=»имя класса». Предлагаю вам немного отвлечься от теории и рассмотреть вот такой вот пример:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html;
 charset=utf-8">
  <title>Классы в CSS</title>
  <style type="text/css">
   .vertical_menu {
    width: 300px; /* ширина колонки с меню */
   }
   .menu_name {
    font-weight: bold; /* жирный шрифт названия меню */
    font-weight: bold; /* жирный шрифт названия меню */
text-align: center; /* ставим по центру текст в названии */
border-top: 1px #fff4e2 solid; /* стили верхней стороны рамки */
border-left: 1px #fff4e2 solid; /* стили левой стороны рамки */
border-bottom: 3px #fff4e2 solid; /* стили нижней стороны
 рамки */
border-right: 1px #fff4e2 solid; /* стили правой стороны рамки */
padding: 7px; /* размер внутренних отступов */
background-color:#EAEAEA /* цвет фона */
   }
   .menu {
    list-style-type: none; /* убираем маркеры списка */
    border: 1px #66ccff solid; /* стили рамки вокруг списка */
    margin: 4px 0; /* изменяем размеры внешних полей */
    padding: 5px; /* изменяем размеры внутренних отступов */
   }
   a {
    color: #0099cc; /* цвет ссылок на странице */
   }
  </style>
 </head>
 <body>
  <div> <!-- Начало колонки с меню -->
   <div>Меню</div>
   <ul>
    <li><a href="#">Первый пункт меню</a></li>
    <li><a href="#">Второй пункт меню</a></li>
    <li><a href="#">Третий пункт меню</a></li>
    <li><a href="#">Четвертый пункт меню</a></li>
   </ul>
  </div> <!-- конец колонки с меню -->
 </body>
</html>

Результат должен получиться следующим:

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

Объединение классов

Объединение классов в CSS используется довольно редко, чаще используется объединение какого-нибудь тега и класса. Чтобы применить к тегу несколько классов, достаточно указать названия классов в атрибуте class через пробел. Ну и как всегда небольшой пример для разминки:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html;
 charset=utf-8">
  <title>Классы</title>
  <style type="text/css">
   p {
    text-align: justify; /* Выравнивание текста по ширине */
   } 
   p.abzac { /* Абзац текста с классом abzac */
    color: #f00; /* Цвет текста */
    margin-left: 20px; /* Отступ слева */
    border-left: 1px solid navy; /* Граница слева от текста */
    padding-left: 15px; /* Расстояние от линии до текста */   
   } 
   .kursiv { font-style: italic; }
   .bold { font-weight: bold; }
   .kursiv.bold { text-decoration: underline; }
  </style>
 </head> 
 <body>
  <p>Это обычный небольшой текст с выравниванием по ширине без
применения классов.</p>
  <p>А этот текст с применением класса <span 
class="kursiv">abzac</span>,
 а также применением классов
<span>bold и kursiv</span> и их <span>объединением</span></p>
 </body>
</html>

В результате должно получиться следующее:

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


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; 
charset=utf-8">
  <title>Объединение классов</title>
  <style type="text/css">  
  p {
    text-align: justify; /* Выравнивание текста по ширине */
   } 
  .bold { font-weight: bold; }
  .blue { color: blue;
background-color:#FEF4E0 }
  .green { color: green; }
  </style>
 </head>
 <body>
  <p>Текст синего цвета.</p>
  <p>Этот текст зеленого цвета, потому 
что класс <span >green</span> стоит ниже в коде
 таблицы стилей.</p>
 </body>
</html>

Вы получите вот такой вот результат:

В следующем уроке мы рассмотрим ещё один вид селекторов — это идентификаторы, которые также как и классы нашли своё применение в CSS

Метки: class, классы в css Свойство list-style. Редактирование маркера в списке. Идентификаторы в CSS 

Селектор .class | CSS справочник

CSS селекторы

Значение и применение


Селектор класса в CSS.

Селектор .class стилизует все элементы с указанным классом. После имени идет блок описаний (объявлений), содержащий свойства и их значения.

Обратите внимание на следующие правила, которые необходимо соблюдать при работе с селекторами класса:

  • все названия селекторов класса должны начинаться с точки (благодаря ей браузеры находят эти селекторы в таблице стилей). Точка требуется только в названии селектора таблицы стилей (в значении глобального HTML атрибута class она не ставится, будьте внимательны из-за этого возникает много ошибок).
  • используйте только буквы алфавита (A-Z, a-z), числа, дефисы, знаки подчеркивания.
  • название после точки всегда должно начинаться с символа (неправильно: .50cent, .-vottakvot).
  • Учитывайте регистр при наименовании стилевых классов, т.к. они к этому чувствительны и очень ранимы (.vottakvot и .VotTakVot разные классы).

Поддержка браузерами

CSS синтаксис:

.class {
блок объявлений;
}

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

a.test { /* выбирает все элементы <a> с классом test */
блок объявлений;
}
p.intro { /* выбирает все элементы <p> с классом intro */
блок объявлений;
}

Версия CSS

CSS1

Пример использования

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

.test {
text-align: center; /* горизонтальное выравнивание текста по центру */
font-family: Courier; /* задаем тип шрифта Courier */
color: green; /* задаем цвет текста*/
margin-top: 50px; /* добавляем отступ от верхнего края элемента */
}

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

<h3 class = "test">Заголовок второго уровня</h3> /* задаем класс для элемента*/

Теперь соберем это в одном примере и посмотрим результат:

<!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8">
	<title> Селекторы класса</title>
<style>
.test {
text-align: center; /* горизонтальное выравнивание текста по центру */
font-family: Courier; /* задаем тип шрифта Courier */
color: green; /* задаем цвет текста*/
margin-top: 50px; /* добавляем отступ от верхнего края элемента */
}
</style>
</head>
<body>
	<h3>Обычный заголовок второго уровня</h3>
	<h3 class = "test">Заголовок с заданным классом</h3>
</body>
</html>

Результат нашего примера:

Использование селектора класса.

Селекторы класса очень гибкий инструмент, который позволяет указать конкретный стиль даже к одному слову предложения. Для этого мы поместим это слово внутри элемента <span> и назначим этому элементу определённый класс, который опишем во внутренней таблице стилей:

<!DOCTYPE html>
<html>
<head>
	<meta charset = "UTF-8">
	<title>Пример выделения одного слова</title>
<style>
.test {
color: #00FF00; /* задаём цвет текста */
font-size: 30px; /* задаем размер шрифта*/
}
</style>
</head>
<body>
	<h3>Обычный заголовок <span class = "test">второго</span> уровня</h3>
</body> 
</html>

Результат нашего примера:

Рис. 6 Пример выделения одного слова с использованием селектора класса.CSS селекторы

Классы CSS, методы использования, простые и доступные примеры

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

Класс CSS с привязкой к элементу

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

Пример синтаксиса

    НАЗВАНИЕ ЭЛЕМЕНТА.имя-класса { свойство: значение }

В CSS-файле это будет выглядеть так

P.class1 { text-align: center }

P.class2 { text-align: left }

Вызов из HTML будет выглядеть таким образом

< P CLASS=”class1”> Текст выровнен по центру </P>
< P CLASS=”class2”> Текст выровнен по левой стороне </P>
< P> текст отформатирован по умолчанию </P>

Класс CSS без привязки к элементу

Во втором случае класс можно не привязывать к конкретному элементу веб-страницы и синтаксис описания будет выглядеть таким вот образом

.имя класса { свойство: значение }

Пример записи в файле CSS

.class1 {color: green }
.class2 {color: red }

Пример в html-коде

<P    CLASS=”class1”> Текст зеленого цвета </P>
<h4 CLASS=”class1”> Заголовок зеленого цвета </h4>

<P    CLASS=”class2” > Текст красного цвета </P>
<h4 CLASS=”class2”> Заголовок красного цвета </h4>

 

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

Уважаемые читатели, если Вы хотите еще глубже разобраться в такой теме как «Стандарты CSS, использование и применение» Предлагаю Вам очень качественный видиокурс Евгения Попова.   Для ознакомления с этим предложением пройдите по этой ссылке.

 

Полезные Материалы:

Мультиклассы | htmlbook.ru

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
5.07.0+1.0+3.5+1.0+1.0+1.0+1.0+

Версии CSS

CSS 1CSS 2CSS 2.1CSS 3

Описание

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

Синтаксис

<E>

Здесь E — обозначает любой тег.

В стилях допустимо использовать запись следующего вида.

.class1.class2 { Описание правил стиля }

В таком случае стиль применяется только для элементов, у которых одновременно заданы классы class1 и class2, т. е. в коде HTML используется конструкция <EexampleTitle»>Пример

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Мультиклассы</title>
  <style>
   .level1 { font-size: 1em; }
   .level2 { font-size: 1.2em; }
   .level3 { font-size: 1.4em; }
   .level4 { font-size: 1.6em; }
   .level5 { font-size: 1.8em; }
   .level6 { font-size: 2em; }
   a.tag { 
    color: #468be1; /* Цвет ссылок */ 
   }
  </style>
 </head> 
 <body>
  <div> 
   <a href="/term/2">Paint.NET</a> 
   <a href="/term/69">Photoshop</a> 
   <a href="/term/3">цвет</a> 
   <a href="/term/95">фон</a> 
   <a href="/term/11">палитра</a> 
   <a href="/term/43">слои</a> 
   <a href="/term/97">свет</a> 
   <a href="/term/44">панели</a> 
   <a href="/term/16">линия</a> 
   <a href="/term/33">прямоугольник</a> 
   <a href="/term/14">пиксел</a> 
   <a href="/term/27">градиент</a> 
  </div>
 </body>
</html>

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

Рис. 1. Цвет и размер ссылок, заданный через классы

Браузеры

Браузер IE до версии 7.0 некорректно работает с мультиклассами и понимает запись .a.b как .b, т.е. воспринимает только имя последнего класса, что приводит к ошибкам.

CSS GuideLines, часть 3. Именование классов / Habr

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

  • Для чего используется класс;
  • Где класс может быть использован;
  • С какими другими классами связан этот класс.

Правила именования, которым я следую, весьма просты: я использую дефис в качестве разделителя, а в сложных местах использую БЭМ-подобное именование.

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

Разделение дефисом

Все слова в названиях классов должны быть разделены дефисом:
.page-head {}

.sub-content {}

CamelCase и знак подчеркивания не используются для классов, следующий пример неправилен:
.pageHead {}

.sub_content {}
БЭМ-подобное именование

Для более крупных взаимосвязанных частей интерфейса я использую БЭМ-подобное именование классов.

БЭМ, то есть Блок, Элемент, Модификатор, это методология, созданная разработчиками Яндекса. Несмотря на то, что БЭМ — это довольно крупная методология, в данный момент мы заинтересованы только в ее способе именования элементов. Причем, мое соглашение по именованию немного отличается от оригинального БЭМ’a: принципы одни и те же, но синтаксис разный.

БЭМ разделяет компоненты верстки на три группы:

  • Блок: главный корневой элемент.
  • Элемент: часть блока.
  • Модификатор: вариант или модификация блока.

Проведем аналогию:
.person {}
.person__head {}
.person--tall {}

В начале класса всегда ставится название блока, для обозначения элемента мы отделяем название блока от названия элемента двумя подчеркиваниями (__), а для обозначения модификатора используем два дефиса (—).

В примере выше мы можем видеть, что .person {} — это блок; у него нет предков. .person__head {} — это элемент, часть блока; наконец, .person--tall — это модификатор, разновидность блока .person {}.

Использование блоков

Блок должен быть логической, самостоятельной единицей. Продолжая наш пример с классом .person {}: мы не можем создать класс .room__person, потому что .room {} — это самостоятельная единица. В таком случае стоит разделять блоки:
.room {}

    .room__door {}

.room--kitchen {}


.person {}

    .person__head {}

Если нам потребуется обозначить человека внутри комнаты, было бы правильнее использовать такой селектор — .room .person, который позволяет не городить кашу из кучи разных непонятных элементов и блоков.

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

.page {}


.content {}


.sub-content {}


.footer {}

    .footer__copyright {}

Каждая часть кода представляет свой собственный блок. Неправильный пример использования:
.page {}

    .page__content {}

    .page__sub-content {}

    .page__footer {}

        .page__copyright {}

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

Если бы мы добавили к нашему блоку .person {} еще один элемент, скажем, .person__eye, то нам не нужно было бы при именовании элемента делать шаг назад, добавляя названия предыдущих элементов, вплоть до корневого элемента. То есть, правильно будет писать .person__eye, а не .person__head__eye.
Добавляем модификации элементов

Вам может потребоваться добавлять вариации элементов, это может быть сделано несколькими способами, в зависимости от того, как и почему эти элементы должны быть изменены. Опять же, если человек имеет голубые глаза, то в CSS это может быть описано так:
.person__eye--blue {}

Однако, в реальных проектах все бывает несколько сложнее. Прощу прощения за такую аналогию, но давайте себе представим человека с красивым лицом. Сам по себе он не особо красив, поэтому лучшим решением будет добавить модификатор к элементу .person__face {}:
.person__face--handsome {}

Но что делать, если мы хотим описать лицо красивого человека? То есть человек красив сам по себе, в отличие от предыдущего примера, и нам нужно описать его лицо? Это делается следующим образом:
.person--handsome .person__face {}

Это один из немногих случаев, когда мы можем менять элемент в зависимости от модификации блока. При использовании Sass получился бы такой код:
.person {}

    .person__face {

        .person--handsome & {}

    }

.person--handsome {}

Заметьте, что мы не добавляем новый элемент .person__face внутрь элемента .person--handsome; вместо этого мы используем родительский селектор Sass внутри уже существующего селектора .person__face. Это значит, что все правила, связанные с .person__face будут находиться в одном месте, и нам не придется разбрасывать их по всему файлу. Это хорошая практика при работе с вложенным кодом: храните все нужные стили внутри одного контекста (в нашем случае, внутри .person__face).
Именование в разметке

Как ранее было замечено, соглашение по именованию классов наиболее полезно при работе с разметкой. Взгляните на следующий кусок разметки, не следующий нашему соглашению:
<div>

    <img />

    <p>...</p>

</div>

Как классы .box и .profile связаны друг с другом? Как классы .profile и .avatar связаны друг с другом? Связаны ли они вообще? Зависит ли класс .bio от класса .pro-user? Можно ли использовать класс .avatar вне этой разметки?

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

<div>

    <img />

    <p>...</p>

</div>

Теперь нам сразу видно, какие классы связаны друг с другом и как, а какие нет; мы знаем, какие классы мы не можем использовать вне этой разметки; наконец, мы знаем, какие классы могут быть использованы в любом другом месте.
JavaScript-хуки

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

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

Как правило, разработчики используют отдельный класс для js, начинающийся с префикса «js-», например:

<input type="submit" value="Follow" />

Такая разметка позволяет использовать стили .btn в любом другом месте, при этом не затрагивая поведения .js-btn.
data-* атрибуты

Также довольно часто разработчиками используются data-* атрибуты в качестве js-хуков, но это неправильно. data-* атрибуты, согласно спецификации, предназначены для хранения данных, недоступных на странице. data-* атрибуты созданы для хранения данных, а не для для привязки к js.
В продолжение темы…

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

Предыдущая часть: CSS GuideLines, часть 2. Комментирование кода

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

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