Несколько правил для написания эффективного и экономного CSS.

ПЛОХО:

Стили, зависящие от родительского элемента

.widget, определяющий стили для виджета
#sidebar .widget — стили для того же самого виджета, расположенного в боковой колонке.

Сложные селекторы, селекторы привязанные к html-разметке

#main-nav ul li ul li div,
#content article h1:first-child,
#sidebar > div > h3 + p

Общие названия классов

.title, .content

ХОРОШО:

Модификаторы

Для небольших изменений в стиле элемента в зависимости от внешних условий лучше создать класс-модификатор:
.widget--red

Пространство имен для селекторов, БЭМ

вместо .widget .title.widget-title
.component-name
.component-name--modifier-name
.component-name__sub-object
.component-name__sub-object--modifier-name

Конкретные названия классов

Тот же самый .widget-title

Отдельные классы для внешнего вида и позиционирования

Такая специфичность дает возможность использовать классы повторно в другом месте.

Логическое структурирование CSS-кода

Базовые стили, включающие сброс и нормализацию, а также стили для элементов по умолчанию.
Стили раскладки, модульной сетки.
Отдельно стили модулей, которые можно использовать повторно.
Стили состояний для JavaScript-изменений.

Выделение классов не связанных с оформлением

Например, префикс js- для JavaScript.

Указание стилей в определенном порядке

Позиционирование
Блочная модель
Типографика
Оформление
Анимация
Разное

0 комментариев

Оставить комментарий

*Доступные HTML-теги: a, abbr, blockquote, code, pre, del, i, em, strong, b, strike
*Не будет опубликован