Лучший способ создать читаемый, понятный и поддерживаемый код - Часть 2

Введение

Привет! Если вы нажмете на эту статью, но не прочитали Часть 1, вы можете проверить первую часть этой статьи о javascript, но если вы хотите продолжать читать чистый код о CSS, без дальнейших требований, давайте начнем 5 общие советы по чистому коду о CSS!

Обзор

CSS

  • Не
  • Интервал
  • Форматирование
  • Соглашение об именах (БЭМ)
  • СУХОЙ! (Не повторяйся)

Часть 2: Чистый код CSS

Не

Давайте сначала поговорим о том, что делать с CSS:

  1. Избегайте использования тегов HTML в селекторах CSS.

2. Не используйте идентификаторы в селекторе.

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

4. Не !important
что случилось, когда вам нужно было переопределить стиль, который уже использует !important? use придется снова использовать !important против него. вот почему не !important, потому что его сложно поддерживать / отменять

5. Избегайте сокращенных свойств, если они вам не нужны.

Интервал

есть некоторая путаница в том, когда и где использовать интервал в CSS?

  1. Четыре пробела для отступа кода

2. Помещайте пробелы после : в объявлениях свойств.

3. В объявлениях правил ставьте пробелы перед {.

4. Напишите свой CSS по одной строке на свойство.

5. Добавьте разрыв строки после } объявлений закрывающих правил.

6. Поместите закрывающие фигурные скобки } в новую строку.

Форматирование

вот несколько советов по форматированию в CSS:

  1. используйте разделитель нижнего регистра, разделите дефис (спинальный регистр)

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. Надеюсь, вы сможете попробовать его в повседневной работе и создать более читаемый, понятный и поддерживаемый код.

Написание кода с использованием руководства по стилю, безусловно, поможет вам получить более чистый код, но не забудьте сначала обсудить это со своей командой, поскольку у каждой проблемы есть свое решение 😉

использованная литература