В курсах профессии «Верстальщик» и его проектах часто используется понятие OOCSS. По этому принципу выстроена большая часть организации CSS-кода внутри профессии. Что же обозначают эти символы?
OOCSS — Object Oriented CSS или объектно-ориентированный CSS. Это один из подходов к организации CSS-кода, отличительной чертой которого является разделение структуры элемента и его оформления.
Зачем же вообще организовывать код CSS и как здесь помогает OOCSS? Чтобы разобраться, возьмём типичный пример CSS, который можно встретить во многих проектах, где нет соглашения об организации кода.
/* Эту часть писал разработчик №1 */
.btn {
width: 150px;
height: 50px;
font-size: 13px;
background: white;
border: 1px solid #333;
}
/* Эту часть писал разрабочик №2 */
.form-order button {
width: 150px;
height: 50px;
font-size: 13px;
background: blue;
}
.button-project {
width: 150px;
height: 50px;
font-size: 13px;
border: 1px solid;
}
/* Разрабочик №1 вернулся и дописал новую кнопку */
.btn-blue-text {
width: 150px;
height: 50px;
font-size: 13px;
color: blue;
background: white;
border: 1px solid #333;
}
Здесь можно увидеть две проблемы, от которых можно избавиться:
- Многие стили повторяются. Если в проекте возникнет потребность изменить размер кнопок, то придётся править много классов.
- Разработчики используют разные подходы к именованию. Может сложиться впечатление, что верстальщики будут смотреть стиль написания предыдущего класса, но зачастую этого не происходит. Каждый начинает писать так, как удобно и привычно ему.
Чем больше проект и чем больше задействовано разработчиков, тем больше таких разных классов в нём возникает. А ведь элементы одинаковые. В них изменяются только внешние признаки: цвет, стиль границ и так далее.
Также полезно: 5 лучших фреймворков для верстки как они устроены и есть ли у них минусы
На сегодняшний день существуют разные способы, которые помогают избежать всех этих проблем и привести CSS к единому виду, который возможно легко масштабировать и читать. Одним из таких подходов и является OOCSS.
Как и было сказано в самом начале, методология OOCSS базируется на двух основных вещах:
- Стили структуры
- Стили оформления
К структуре относится всё, что непосредственно влияет на расположение контента внутри. Пользователи обычно «не видят» эти стили — пока у элемента нет оформления, он просто будет представлен пустым блоком. К стилям структуры можно отнести:
- Высоту
- Ширину
- Внутренние и внешние отступы
К стилям оформления относятся:
- Фон
- Шрифты
- Тени и цвет границ.
Для понимания разницы можно использовать следующий принцип: если стиль отвечает за то, как элемент расположен, то это стиль структуры, а если как выглядит, то это стиль оформления.
Теперь возьмём стили из примера выше и определим, что из них является структурой, а что оформлением.
/* Стили структуры */
.btn {
width: 150px;
height: 50px;
}
/* Стили оформления */
.btn-blue {
background: blue;
color: white;
border: 1px solid #f9f9f9;
}
.btn-red {
background: red;
color: white;
border: 1px solid #f9f9f9;
}
Теперь все кнопки стандартизированы. У них есть общий класс .btn, который отвечает за структуру кнопок. При доработках структуры будет достаточно изменить этот класс, и он применится ко всем кнопкам сразу. Оформление кнопок теперь тоже основывается на классах, что помогает быстро их менять при необходимости.
Начните изучать разработку с бесплатного курса «Основы современной вёрстки». Вы научитесь создавать статические веб-страницы, стилизовать элементы, использовать редакторы кода с полезными расширениями. В конце курса вы опубликуете свой первый сайт на GitHub Pages.
Ещё одной особенностью подхода OOCSS является то, что отсутствует привязка к конкретному тегу. Все структурные классы можно применять к любым тегам (в рамках разумного, конечно же). Как кнопки могут быть оформлены не только элементы с тегом <button></button>, но и ссылки <a></a>. Если доработать класс .btn, то он может учитывать все эти моменты.
.btn {
display: block;
width: 150px;
height: 50px;
border: none;
background: none;
cursor: pointer;
}
Использование данных классов выглядит следующим образом:
<a href="#best-section" class="btn btn-blue">Перейти к блоку</a>
<form action="/index.php">
<label for="name">Имя:</label>
<input type="text" id="name">
<button class="btn btn-red">Отправить</button>
</form>
Достоинства OOCSS
Масштабируемость
Применение OOCSS позволяет легко дополнять CSS-код и переиспользовать его. Не привязывая классы к конкретному элементу, мы оставляем простор для переиспользования и комбинации различных классов. В совместной разработке этот подход позволит легче войти новым разработчикам. Последнее относится не только к OOCSS, но и к любой методологии организации CSS кода.
Простота
Для новичков такой подход может быть легче, чем другие. Дело в том, что OOCSS не накладывает ограничения на именование, не закрыт в рамках конкретного стандарта, что позволяет думать конкретно о реализации разделения структуры и оформления, а не об именовании и грамотной вложенности элементов внутри HTML.
Читайте также: HTML/CSS как центрировать по вертикали
Недостатки OOCSS
Большое количество классов в HTML
Все подходы к организации CSS можно разделить на две условные группы:
- Чистота CSS при усложнённом HTML
- Чистый HTML при усложнённом CSS
OOCSS относится к первой группе. За чистотой и переиспользованием CSS стоит захламление HTML. Один элемент при данном подходе может иметь много классов. Это нормальная ситуация.
Ограниченное применение
OOCSS — подход для больших проектов. Его использование на маленьких проектах может быть излишним, поэтому сфера применения достаточно узкая. Всегда подходите к вёрстке «с головой» и не используйте большие инструменты там, где можно обойтись без них. Чем больше планируется проект, тем больше стоит задумываться над организацией CSS.
Заключение
OOCSS не является магическим знанием, которое решит все ваши проблемы. Это не под силу никакой методологии. По мере получения опыта вы найдёте подходящую для вас методологию, которая будет отвечать всем вашим требованиям. Приучайте себя организовывать код с самого начала пути в разработке. Это выработает привычку, которая поможет вам в будущем быстро создавать читаемый и поддерживаемый CSS-код.
