Оригинальный адрес:CSS Naming Conventions that Will Save You Hours of Debugging

Оригинальный автор:Ohans Emmanuel

Перевод с:Программа перевода самородков

Постоянная ссылка на эту статью:GitHub.com/rare earth/gold-no…

Переводчик:unicar

Корректор:dazhi1011,swants

Эти соглашения об именах CSS сэкономят вам много времени на отладку.

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

CSS — не самый красивый «язык», но уже более двух десятилетий он является жизненно важным инструментом для украшения Интернета. С этой точки зрения неплохо, правда?

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

Потому что поддерживать CSS действительно сложно.

Особенно плохо написанный CSS может быстро стать кошмаром для программиста.

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

Вы, должно быть, испытали это, верно?

строка, разделенная дефисом

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

var redBox = document.getElementById('...')

Это хорошо, верно?

Проблема в том, что эта номенклатура неприменима к CSS.

Пожалуйста, не называйте его следующим образом:

.redBox {
  border: 1px solid red;
}

Соответственно можно написать:

.red-box {
   border: 1px solid red;
}

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

Кроме того, это согласуется с именами свойств CSS.

// Correct
.some-class {
   font-weight: 10em
}
// Wrong
.some-class {
   fontWeight: 10em
}

Соглашение об именах БЭМ

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

В общем, эти соглашения об именах CSS пытаются решить 3 типа проблем:

Знание того, что делает селектор CSS, только по его имени
Из названия в целом понятно, где можно использовать селектор
Связь между классами CSS видна из их названий.

Я не знаю, видели ли вы когда-нибудь такое имя класса:

.nav--secondary {
  ...
}
.nav__header {
  ...
}

Это соглашение об именах БЭМ.

Объяснение кода БЭМ пятилетнему ребенку

Спецификация БЭМ пытается разбить весь пользовательский интерфейс на небольшие повторно используемые компоненты.

Давайте посмотрим на изображение ниже:

Это отмеченный наградами крупье :)

О, к сожалению, нет :(

Этот крупье представляет собой компонент, скажем, блок дизайна.

Как вы уже догадались, буква B в БЭМ означает «Блокировать».

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

Согласно приведенному выше объяснению, идеальным именем класса для этого компонента являетсяstick-man.

Стиль компонента должен быть написан следующим образом:

.stick-man {
  
 }

Здесь мы используем разделение дефисом, отлично!

E означает Элементы

E в БЭМ означает элемент.

Общая блочная конструкция часто не изолирована.

Допустим, у этого крупье есть голова (head), две красивые руки (arms) и ноги (feet).

The head , feet, and arms— это все элементы внутри компонента, которые можно рассматривать как дочерние компоненты, т. е. дочерние элементы всего родительского компонента. Этиhead,feetа такжеarmsвсе элементы в компоненте. Их можно рассматривать как дочерние компоненты, то есть компоненты родительского компонента. Если используется соглашение об именах БЭМ, имена классов этих элементов могут бытьдва подчеркиванияза которым следует имя элемента для генерации.

Например:

.stick-man__head {
}
.stick-man__arms {
}
.stick-man__feet {
}

M означает модификаторы

М обозначает модификатор в номенклатуре БЭМ.

Если у этого крупье естьblueилиredКак быть с такими модификаторами?

В реальных сценариях это может бытьredилиblueкнопка. Это ограниченная модификация компонентов, упомянутых ранее.

Если используется БЭМ, имена классов этих модификаторов могут быть переданы двумядефисПосле того, как имя элемента добавлено для генерации.

Например:

.stick-man--blue {
}
.stick-man--red {
}

В этом последнем примере показан родительский компонент плюс модификаторы. Но это случается не очень часто.

Что, если бы у нашего крупье был другой размер головы?

На этот раз элемент добавляется с модификаторами. Помните, что элемент относится к подкомпоненту в общем блоке пакета.

.stick-manпредставляет собой блок (Block),.stick-man__headПредставляет элемент.

Как видно из приведенного выше примера, двойные дефисы также можно использовать следующим образом:

.stick-man__head--small {
}
.stick-man__head--big {
}

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

Итак, вы понимаете.

Это основное использование БЭМ.

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

О БЭМ, отсюда, чтобы учитьсяБолее

BEM - Block Element Modifier: _BEM — модификатор блочных элементов — это методология, которая помогает вам создавать повторно используемые компоненты и совместное использование кода в… _getbem.com

Зачем использовать соглашения об именах?

В компьютерных науках есть только два типа сложных задач: инвалидация кеша и именование.Phil Karlton

Назвать действительно сложно. Поэтому мы хотим попытаться сделать это как можно проще и сэкономить время на поддержку кода в будущем.

Умение правильно называть классы в CSS может упростить понимание и поддержку вашего кода.

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

Чувствуешь себя хорошо?

Имя CSS, связанное с JavaScript

Сегодня у Джона первый рабочий день.

Он получил следующееHTMLКод:

<div class="siteNavigation">
</div>

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

<div class="site-navigation">
</div>

Выглядит хорошо, верно?

Но чего Джон не ожидал, так это того, что он испортил всю кодовую базу 😩😩😩

Почему это происходит?

В коде JavaScript есть раздел, который предшествует имени класса.siteNavigationСвязанный:

// Javascript 代码
const nav = document.querySelector('.siteNavigation')

В связи с изменением названия классаnavТеперь переменная становитсяnull.

Очень грустно. 😔😔

Чтобы этого не произошло, разработчики придумали массу различных стратегий.

1. Используйте js-имя класса

Один из способов уменьшить количество таких ошибок — использоватьjs-Метод именования имени класса. Используйте этот метод, чтобы указать связь этого элемента DOM с кодом JavaScript.

Например:

<div class="site-navigation js-site-navigation">
</div>

То же самое в коде JavaScript:

//the Javasript code
const nav = document.querySelector('.js-site-navigation')

Согласно соглашению об именах, каждый видитjs-site-navigationС этим именем класса вы будете знать, что есть фрагмент кода, связанный с этим элементом DOM в коде JavaScript.

2. Использование свойства Rel

Я не использовал этот метод сам, но я видел, как другие используют его.

Вы знакомы с таким кодом?

<link rel="stylesheet" type="text/css" href="main.css">

Вообще говоря,Rel атрибутОпределите отношение между ресурсами ссылки и ссылкой на ее файлы.

Оглядываясь назад на пример Джона, этот подход предполагает, что мы записываем его следующим образом:

<div class="site-navigation" rel="js-site-navigation">
</div>

Также в JavaScript:

const nav = document.querySelector("[rel='js-site-navigation']")

У меня есть оговорки по поводу этого подхода. Однако вы, скорее всего, увидите их в некоторых кодовых базах. Этот метод похож на высказывание:«Ну, есть ассоциация с Javascript, поэтому я буду использовать атрибут rel для представления этой ассоциации».

В Интернете часто можно найти бесчисленное множество «методов» решения одной и той же проблемы.

3. Не используйте атрибуты данных

Некоторые разработчики используют атрибуты данных в качестве ловушек JavaScript. это неправильно. По определению, атрибуты данных используются длядля хранения пользовательских данныхиз.

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

Дополнительное предложение: напишите больше комментариев CSS

Это не имеет ничего общего с соглашениями об именах, но сэкономит ваше время.

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

Это связано с тем, что CSS — не самый лаконичный и элегантный «язык», а хорошо организованные комментарии помогут вам тратить меньше времени на понимание кода.

Польза без вреда, почему бы и не сделать.

Вы можете видеть, насколько хорошо написаны комментарии Bootstrap.source code

вам не нужно писатьcolor: red, говорит сам себе, что это устанавливает красный цвет. Но если вы используете трюк CSS, который не очень прост и понятен, вы можете написать комментарий, чтобы объяснить его в это время.

Готовы ли вы стать фанатом CSS?

Я создал руководство, которое улучшит ваши навыки работы с CSS.Получите вашу бесплатную электронную книгу здесь

Семь читов CSS, о которых вы не знали.

Программа перевода самородковэто сообщество, которое переводит высококачественные технические статьи из ИнтернетаНаггетсДелитесь статьями на английском языке на . Охват контентаAndroid,iOS,внешний интерфейс,задняя часть,блокчейн,товар,дизайн,искусственный интеллектЕсли вы хотите видеть более качественные переводы, пожалуйста, продолжайте обращать вниманиеПрограмма перевода самородков,официальный Вейбо,Знай колонку.