Лучший способ создать читаемый, понятный и поддерживаемый код - Часть 2
Введение
Привет! Если вы нажмете на эту статью, но не прочитали Часть 1, вы можете проверить первую часть этой статьи о javascript, но если вы хотите продолжать читать чистый код о CSS, без дальнейших требований, давайте начнем 5 общие советы по чистому коду о CSS!
Обзор
CSS
- Не
- Интервал
- Форматирование
- Соглашение об именах (БЭМ)
- СУХОЙ! (Не повторяйся)
Часть 2: Чистый код CSS
Не
Давайте сначала поговорим о том, что делать с CSS:
- Избегайте использования тегов HTML в селекторах CSS.
2. Не используйте идентификаторы в селекторе.
3. Не используйте более 3 уровней вложения,
слишком глубокое вложение, это увеличивает специфичность и сложнее переопределить
4. Не !important
что случилось, когда вам нужно было переопределить стиль, который уже использует !important
? use придется снова использовать !important
против него. вот почему не !important
, потому что его сложно поддерживать / отменять
5. Избегайте сокращенных свойств, если они вам не нужны.
Интервал
есть некоторая путаница в том, когда и где использовать интервал в CSS?
- Четыре пробела для отступа кода
2. Помещайте пробелы после :
в объявлениях свойств.
3. В объявлениях правил ставьте пробелы перед {
.
4. Напишите свой CSS по одной строке на свойство.
5. Добавьте разрыв строки после }
объявлений закрывающих правил.
6. Поместите закрывающие фигурные скобки }
в новую строку.
Форматирование
вот несколько советов по форматированию в CSS:
- используйте разделитель нижнего регистра, разделите дефис (спинальный регистр)
2. Всегда отдавайте предпочтение двойному слэшу //
в Sass при комментировании, даже для блочных комментариев.
3. Не указывайте единицы для нулевых значений.
4. Всегда добавляйте точку с запятой в конце объявления свойства / значения.
5. Используйте ведущие нули для десятичных значений.
6. Поместите пробелы до и после дочернего селектора.
Соглашение об именах (БЭМ)
Какие? в конце концов, почему мы сейчас просто говорим о соглашении об именах? это должно быть первое, что нужно обсуждать?
Что ж, все приведенные выше примеры (запреты, интервалы и форматирование) говорят об общем руководстве по написанию CSS. поэтому, прежде чем мы начнем говорить о более конкретных вещах, таких как соглашение об именах, я хотел бы сначала поделиться общей картиной написания CSS в целом.
Итак, поговорим о соглашении об именах. безусловно, существует множество соглашений о методах / именах, используемых различными разработчиками / инженерами. но в этой статье я хотел бы поделиться и предложить одно из соглашений об именах CSS, которые я в настоящее время использую в своих работах.
ага, это БЭМ. ну, это не будет глубоким, но я поделюсь с вами простым способом. давай проверим!
БЭМ: блок, элемент, модификатор.
1. Вкратце, блок
- это абстракция верхнего уровня нового компонента. представьте, что у вас есть компонент карты (блок)
2. Элемент
значит, у вас есть дочерние элементы внутри блока. допустим, у вас есть заголовок (элемент) внутри компонента карточки (блок)
подсказки: БЭМ-нотация для элемента - двойное подчеркивание block__element
3. Модификатор
и вместо черного заголовка, как в предыдущем примере, вы можете использовать другой цветовой вариант заголовка. создадим другой вариант цвета (модификатор)
подсказки: обозначение модификатора в БЭМ - двойное тире block__element--modifier
Вот и все! просто не так ли? теперь вы можете попробовать соглашение об именах БЭМ самостоятельно 😉
И, возможно, вы хотите пойти дальше по поводу префиксов / пространств имен в соглашении об именах БЭМ, вы можете проверить это: BEMIT: шаг вперед к соглашению об именах BEM 🌈
СУХОЙ! (Не повторяйся)
И, наконец, еще один совет по чистому коду CSS - это СУХОЙ. проявите изобретательность, не забудьте сгруппировать стили, содержащие одинаковые правила 😄
Завершение второй части
(Другой) Наконец-то! это конец чистого кода, часть 2 (CSS).
Надеюсь, вторая часть статьи о чистом коде также поможет вам понять, как писать более чистый код на CSS. Есть еще много руководств по стилю о том, как написать более чистый CSS, но в этой статье я определенно не могу изложить все это, так что вы также можете изучить и найти гораздо больше о чистом коде CSS помимо этой статьи.
Упаковать
Что ж, мы много говорили о чистом коде JavaScript и CSS. Надеюсь, вы сможете попробовать его в повседневной работе и создать более читаемый, понятный и поддерживаемый код.
Написание кода с использованием руководства по стилю, безусловно, поможет вам получить более чистый код, но не забудьте сначала обсудить это со своей командой, поскольку у каждой проблемы есть свое решение 😉