Что верстальщик должен знать про OOCSS и организацию CSS
2026-02-26 23:04 Diff
https://ru.hexlet.io/blog/posts/oocss-basics

В курсах профессии «Верстальщик» и его проектах часто используется понятие OOCSS. По этому принципу выстроена большая часть организации CSS-кода внутри профессии. Что же обозначают эти символы?

Содержание

Что такое OOCSS

OOCSS — Object Oriented CSS или объектно-ориентированный CSS. Это один из подходов к организации CSS-кода, отличительной чертой которого является разделение структуры элемента и его оформления.

Зачем же вообще организовывать код CSS и как здесь помогает OOCSS? Чтобы разобраться, возьмём типичный пример CSS, который можно встретить во многих проектах, где нет соглашения об организации кода.

Здесь можно увидеть две проблемы, от которых можно избавиться:

  1. Многие стили повторяются. Если в проекте возникнет потребность изменить размер кнопок, то придётся править много классов.
  2. Разработчики используют разные подходы к именованию. Может сложиться впечатление, что верстальщики будут смотреть стиль написания предыдущего класса, но зачастую этого не происходит. Каждый начинает писать так, как удобно и привычно ему.

Чем больше проект и чем больше задействовано разработчиков, тем больше таких разных классов в нём возникает. А ведь элементы одинаковые. В них изменяются только внешние признаки: цвет, стиль границ и так далее.

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

Как и было сказано в самом начале, методология OOCSS базируется на двух основных вещах:

  1. Стили структуры
  2. Стили оформления

К структуре относится всё, что непосредственно влияет на расположение контента внутри. Пользователи обычно «не видят» эти стили — пока у элемента нет оформления, он просто будет представлен пустым блоком. К стилям структуры можно отнести:

  • Высоту
  • Ширину
  • Внутренние и внешние отступы

К стилям оформления относятся:

  • Фон
  • Шрифты
  • Тени и цвет границ.

Для понимания разницы можно использовать следующий принцип: если стиль отвечает за то, как элемент расположен, то это стиль структуры, а если как выглядит, то это стиль оформления.

Теперь возьмём стили из примера выше и определим, что из них является структурой, а что оформлением.

Теперь все кнопки стандартизированы. У них есть общий класс .btn, который отвечает за структуру кнопок. При доработках структуры будет достаточно изменить этот класс, и он применится ко всем кнопкам сразу. Оформление кнопок теперь тоже основывается на классах, что помогает быстро их менять при необходимости.

Начните изучать разработку с бесплатного курса «Основы современной вёрстки». Вы научитесь создавать статические веб-страницы, стилизовать элементы, использовать редакторы кода с полезными расширениями. В конце курса вы опубликуете свой первый сайт на GitHub Pages.

Ещё одной особенностью подхода OOCSS является то, что отсутствует привязка к конкретному тегу. Все структурные классы можно применять к любым тегам (в рамках разумного, конечно же). Как кнопки могут быть оформлены не только элементы с тегом <button></button>, но и ссылки <a></a>. Если доработать класс .btn, то он может учитывать все эти моменты.

Использование данных классов выглядит следующим образом:

Достоинства OOCSS

Масштабируемость

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

Простота

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

Недостатки OOCSS

Большое количество классов в HTML

Все подходы к организации CSS можно разделить на две условные группы:

  • Чистота CSS при усложнённом HTML
  • Чистый HTML при усложнённом CSS

OOCSS относится к первой группе. За чистотой и переиспользованием CSS стоит захламление HTML. Один элемент при данном подходе может иметь много классов. Это нормальная ситуация.

Ограниченное применение

OOCSS — подход для больших проектов. Его использование на маленьких проектах м��жет быть излишним, поэтому сфера применения достаточно узкая. Всегда подходите к вёрстке «с головой» и не используйте большие инструменты там, где можно обойтись без них. Чем больше планируется проект, тем больше стоит задумываться над организацией CSS.

Заключение

OOCSS не является магическим знанием, которое решит все ваши проблемы. Это не под силу никакой методологии. По мере получения опыта вы найдёте подходящую для вас методологию, которая будет отвечать всем вашим требованиям. Приучайте себя организовывать код с самого начала пути в разработке. Это выработает привычку, которая поможет вам в будущем быстро создавать читаемый и поддерживаемый CSS-код.