Основы объектно-ориентированного CSS (OOCSS)

Разработка интерфейса движется быстро, каждый год добавляется много новых технологий. Для разработчиков может быть трудно идти в ногу со всем. Между Sass и PostCSS легко потеряться в море инструментов разработки.

Одним из более новых методов является объектно-ориентированный CSS, также называемый OOCSS для краткости. Это не инструмент, а скорее методология написания CSS, цель которой сделать CSS модульным и объектно-ориентированным.

В этом посте я хотел бы рассказать об основных принципах OOCSS и о том, как эти идеи могут быть применены для веб-интерфейса. Этот метод может не понравиться каждому разработчику, но стоит понять новые концепции, чтобы решить, может ли ваш рабочий процесс извлечь из этого пользу.
Что делает CSS объектно-ориентированным?
Объектно-ориентированного программирования (ООП) – это парадигма программирования, которая фокусируется на создании повторно используемых объектов и установлении отношений между ними, в отличие от процедурное программирование который организует код в процедуры (подпрограммы, подпрограммы или функции).

В последние несколько лет ООП стал широко использоваться как в JavaScript, так и в базовых языках, но организация CSS в соответствии с его принципами все еще остается новой концепцией.

«Объект» в OOCSS относится к элементу HTML или всему, что с ним связано (например, классы CSS или методы JavaScript). Например, у вас может быть объект виджета на боковой панели, который можно реплицировать для различных целей (регистрация в новостной рассылке, рекламные блоки, недавние публикации и т. Д.). CSS может нацеливаться на эти объекты массово, что делает масштабирование быстрым.

Подведение итогов OOCSS ’GitHub, CSS объект может состоять из четырех вещей:

1. HTML-узел (-ы) DOM
2. CSS декларации о стиле этих узлов
3. Компоненты, такие как фоновые изображения
4. Поведение JavaScript, слушатели или методы, связанные с объектом

Вообще говоря, CSS является объектно-ориентированным, когда рассматривает классы, которые можно использовать повторно и нацеленные на несколько элементов страницы.

Многие разработчики сказали бы, что OOCSS легче поделиться с другими, и его легче подобрать после нескольких месяцев (или лет) неактивной разработки. Это сравнивается с другими модульными методами, такими как SMACSS, который имеет более строгие правила для классификации объектов в CSS.

Страница часто задаваемых вопросов OOCSS есть куча информации, если вам интересно узнать больше. И создатель Николь Салливан часто говорит о OOCSS и как это связано с современной веб-разработкой.

Отдельная структура от стиля
Большая часть OOCSS – это написание кода, который отделяет структуру страницы (ширина, высота, поля, отступы) от внешнего вида (шрифты, цвета, анимация). Это позволяет применять пользовательские обложки к нескольким элементам страницы, не затрагивая структуру.

Это также полезно для разработки компонентов, которые можно легко перемещать по макету. Например, виджет «Последние сообщения» на боковой панели должен быть перемещен в нижний колонтитул или над содержимым при сохранении схожих стилей.

Вот пример OOCSS для виджета «Последние сообщения», который в данном случае является нашим CSS-объектом:

/* Структура */
.side-widget {
  ширина: 100%;
  отступы: 10px 5px;
}

/ * Скиннинг * /
.Недавние Посты {
  семейство шрифтов: Helvetica, Arial, без засечек;
  цвет: # 2b2b2b;
  Размер шрифта: 1.45em;
}

Заметь расположение управляется с помощью класса .side-widget, который также может применяться к нескольким элементам боковой панели, в то время как появление управляется с помощью класса .recent-posts, который также может использоваться для оформления других виджетов. Например, если виджет .recent-posts был перемещен в нижний колонтитул, он может не иметь такого же расположения, но он может выглядеть и выглядеть одинаково.

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

Увидеть перо Пример боковой панели OOCSS – Завершено Джули Кэмерон (@jewlofthelotus) на CodePen,
Отдельный контейнер от содержимого
Отделение контента от его элемента контейнера является еще одним важным принцип OOCSS,

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

Вот простой пример:

/ * OOCSS * /
.sidebar {/ * содержимое боковой панели * /}
h2.sidebar-title {/ * специальные стили элемента h2 * /}

/ * Non-OOCSS * /
.sidebar {/ * то же содержимое боковой панели * /}
.sidebar h2 {/ * добавляет больше специфичности, чем необходимо * /}

Хотя использование второго формата кода не является ужасным, настоятельно рекомендуется следовать первому формату, если вы хотите написать чистый OOCSS.
Руководство по разработке
Трудно точно определить точные спецификации, потому что разработчики постоянно обсуждают цель OOCSS. Но вот несколько советов, которые могут помочь вам написать более чистый код OOCSS:

• Работа с классами вместо идентификаторов для стиля.
• Старайтесь воздерживаться от многоуровневой специфики классов-потомков, если в этом нет необходимости.
• Определите уникальные стили с повторяемыми классами (например, float, clearfix, уникальные стеки шрифтов).
• Расширяйте элементы с помощью целевых классов, а не родительских классов.
• Организуйте свою таблицу стилей по разделам, рассмотрите возможность добавления оглавления.

Обратите внимание, что разработчики должны использовать идентификаторы для таргетинга JavaScript, но они не требуются для CSS, потому что они слишком специфичны. Если один объект использует идентификатор для стилевого оформления CSS, он никогда не сможет реплицироваться, поскольку идентификаторы являются уникальными идентификаторами. Если вы используете только классы для стилизации, тогда наследование станет намного проще прогнозировать.

Кроме того, классы могут быть объединены в цепочку для дополнительных функций. К одному элементу может быть прикреплено более 10 классов. Хотя более 10 классов для одного элемента я не рекомендую лично, это позволяет разработчикам накопить библиотеку повторно используемых стилей для неограниченного числа элементов страницы.

Имена классов в OOCSS несколько противоречивы и не задеты в камне. Многие разработчики предпочитают, чтобы занятия были короткими и точными.

Чехол для верблюда также популярен, например .errorBox вместо .error-box. Если вы посмотрите на именование классов в документации OOCSS вы заметите, что верблюжий случай является «официальной» рекомендацией. В тире нет ничего плохого, но, как правило, лучше всего следовать Руководящие принципы OOCSS,
OOCSS + Sass
Большинство веб-разработчиков уже любят Sass, и он быстро обогнал интерфейсное сообщество. Если вы еще не пробовали Sass, стоит попробовать. Это позволяет вам писать код с переменными, функциями, методами вложения и компиляции, такими как математические функции.

В компетентных руках Sass и OOCSS могли бы быть матчем на небесах. Вы найдете отличную статью об этом на Блог Sass Way,

Например, используя Sass @extend Директива вы можете применить свойства одного класса к другому классу. Свойства не дублируются, но вместо этого два класса объединяются с помощью селектора запятой. Таким образом, вы можете обновить свойства CSS в одном месте.

Если вы постоянно пишете таблицы стилей, это сэкономит часы печати и поможет автоматизировать процесс OOCSS.
ОБРАЗ: Шон АмарасингхеТакже помните, что поддержка кода является большой частью OOCSS. Используя Sass, ваша работа становится проще с переменными, смешанными и продвинутыми подкладочные инструменты привязаны к рабочему процессу.

Ключевым атрибутом отличного кода OOCSS является возможность поделиться им с кем-либо, даже самим собой на более позднем этапе, и иметь возможность с легкостью подобрать его.
Вопросы производительности
OOCSS предназначен для бесперебойной работы. Разработчики стараются изо всех сил не повторяться на каждом шагу, на самом деле это предпосылка СУХАЯ разработка, Со временем метод OOCSS может привести к сотням классов CSS с индивидуальными свойствами, применяемыми десятки раз в данном документе.

Поскольку OOCSS по-прежнему является новой темой, трудно спорить на тему раздувания. Многие файлы CSS в конечном итоге раздуты с небольшой структурой, тогда как OOCSS обеспечивает жесткая конструкция и (в идеале) меньше раздувать. Наибольшая проблема производительности будет в HTML, где некоторые элементы могут накапливать несколько разных классов для структуры макета и дизайна.

Вы найдете интересные дискуссии по этой теме на таких сайтах, как Переполнение стека а также CSS-Tricks,

Моя рекомендация состоит в том, чтобы попытаться создать пример проекта и посмотреть, как он работает. Если вы влюбитесь в OOCSS, это может радикально изменить то, как вы кодируете сайты. Кроме того, если вы ненавидите это, вы все еще изучаете новую технику и критически думаете о том, как она работает. Это беспроигрышный, несмотря ни на что.
Занять Письмо OOCSS
Лучший способ научиться чему-либо в веб-разработке – это практиковаться. Если вы уже понимаете основы CSS, значит, вы уже в пути!

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

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