58. SMACSS и OOCSS

CSS: SMACSS и OOCSS

В этом уроке мы рассмотрим два подхода к организации CSS кода: SMACSS и OOCSS. Эти методологии помогают писать более поддерживаемый, масштабируемый и понятный CSS.

Что такое SMACSS и OOCSS?

SMACSS (Scalable and Modular Architecture for CSS) – это руководство по стилизации, которое разделяет CSS правила на категории для лучшей организации и повторного использования. Оно не является строгим фреймворком, а скорее набором рекомендаций.

OOCSS (Object-Oriented CSS) – это методология, основанная на принципах объектно-ориентированного программирования. Она фокусируется на создании повторно используемых “объектов” (компонентов) и разделении структуры и скина.

OOCSS: Разделение структуры и скина

Основная идея OOCSS – разделить стили на две категории:

• Структура: Определяет расположение элемента на странице (ширина, высота, отступы, и т.д.).
• Скин: Определяет внешний вид элемента (цвет, фон, шрифт, и т.д.).

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

<button class="button button--primary">Кнопка</button>
<button class="button button--secondary">Кнопка</button>

/* Структура */
.button {
  display: inline-block;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
}

/* Скин (Primary) */
.button--primary {
  background-color: blue;
  color: white;
}

/* Скин (Secondary) */
.button--secondary {
  background-color: gray;
  color: black;
}

В этом примере button определяет структуру кнопки, а button--primary и button--secondary определяют её внешний вид.

SMACSS: Категории стилей

SMACSS предлагает разделять стили на 5 категорий:

1. Base: Базовые стили для элементов HTML (например, body, h1, p).
2. Layout: Стили, определяющие структуру страницы (например, хедер, футер, навигация). Используют префиксы, например, l-.
3. Module: Независимые, повторно используемые компоненты (например, кнопки, формы).
4. State: Стили, изменяющие внешний вид модуля в определенном состоянии (например, :hover, .is-active). Используют префиксы, например, is-.
5. Theme: Стили, определяющие общий внешний вид сайта (например, цветовая схема, шрифты).

/* Base */
body {
  font-family: sans-serif;
  margin: 0;
}

/* Layout */
.l-header {
  width: 100%;
  background-color: #eee;
}

/* Module */
.button {
  padding: 10px 20px;
  background-color: #007bff;
  color: white;
  border: none;
  cursor: pointer;
}

/* State */
.button:hover {
  background-color: #0056b3;
}

.is-active {
    font-weight: bold;
}

/* Theme */
:root {
  --primary-color: #007bff;
}

Жизненный пример

Многие CSS фреймворки, такие как Bootstrap и Foundation, используют принципы OOCSS и SMACSS. Например, Bootstrap использует классы типа btn (структура) и btn-primary (скин) для стилизации кнопок. Современные CSS-in-JS библиотеки, такие как Styled Components, также позволяют легко создавать повторно используемые компоненты, разделяя стили и логику. Большие веб-сайты, такие как новостные порталы или интернет-магазины, часто используют эти подходы для организации своего CSS, чтобы обеспечить консистентность и облегчить поддержку.

Ключевые моменты

• SMACSS и OOCSS – это методологии, а не строгие фреймворки.
• OOCSS фокусируется на разделении структуры и скина.
• SMACSS разделяет стили на категории: Base, Layout, Module, State, Theme.
• Использование этих подходов позволяет писать более поддерживаемый и масштабируемый CSS.
• Многие CSS фреймворки и библиотеки используют принципы OOCSS и SMACSS.

Интерактивный пример