Перевод статьи:  Concept of Object Oriented CSS.
Автор:  dreammaker.

Объектно Ориентированный CSS (Object Oriented CSS – OOCSS) представляет собой концепцию CSS, которая предусматривает быстрое, легкое в обслуживании и отвечающее требованиям стандартов представление CSS кода. В OOCSS используются принципы Объектно Ориентированного Программирования (Object Oriented Programming – OOP), что позволяет создавать CSS конструкции, которые предназначены для многократного использования, а это в свою очередь снижает время загрузки веб-страниц и существенно повышает их производительность. Речь идет не о новой технологии или среде разработки, а особом подходе к созданию правил, позволяющих придать CSS коду свойства масштабируемости и гибкости в использовании.

Впервые термин OOCSS был использован разработчиком пользовательского интерфейса Николь Салливан (Nicole Sullivan), которая представила несколько различных презентаций на эту тему. Рекомендую ознакомиться с одной из ее видео презентаций.

Что такое CSS объект?

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

Объектно-ориентированный подход в CSS включает в себя два ключевых аспекта:

• Разделение структуры шаблона и его оболочки.

  Здесь подразумевается, что каждый созданный фрагмент CSS кода, находящийся в рамках шаблона можно использовать, указывая его оболочку (имя класса) в необходимых местах. Таким образом, за счет возможности манипуляции различными шаблонами (объектами), т.е. их оболочками (именами), мы получаем мощный и очень гибкий инструмент визуального оформления компонентов веб-страницы, не загромождая ее при этом лишним кодом. Другими словами, имена классов используются для названий объектов и их компонентов, что позволяет значительно расширить возможности, предусмотренные семантическими правилами HTML.

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

• Разделение контейнера и его содержимого.

  Имеется ввиду сведение к минимуму использование селекторов, построенных на родственных отношениях HTML элементов. То есть селекторов, указывающих на вложенные в родительский блок элементы. Свойства объекта не должны зависеть от его позиции в документе. К примеру, при форматировании элемента заголовка <h2> вложенного в блок с классом myObject вместо селектора .myObject h2 нужно создать отдельный класс и применить его к нужному элементу заголовку второго уровня, который может находиться в любом месте структуры документа.

  Это дает нам следующие преимущества:

  • Все «чистые», не содержащие имен классов заголовки <h2>, будут иметь один вид, не зависимо от их позиции.
  • Это же касается и тех элементов, которые относятся к одному классу – они будут выглядеть одинаково в любом месте страницы.
  • Если вам необходимо чтобы вложенный элемент (в нашем случае <h2>, который выбирается селектором .myObject h2), отображался обычным, стандартным способом (который свойственен «чистым» <h2> элементам), то для этого не потребуется создавать дополнительное правило, переопределяющее уже существующее.

Чего не следует делать при использовании OOCSS подхода.

• Избегайте присутствия идентификаторов элементов в селекторах.
• Не следует использовать селекторы потомков.
• Также не рекомендуется применять директиву !important.
• Не следует к селекторам, отбирающим элементы по их имени (к примеру, h2 { … }) добавлять имена классов.

Преимущества.

• Уменьшается дублирование кода.
• Улучшается SEO дружелюбность страниц.
• Удобство при обслуживании, доработке и оптимизации.
• Исходный код строится на иерархической структуре форматирования элементов с осмысленными именами классов.
• Возможность повторного использования большинства компонентов.
• Локальное редактирование кода объекта позволяет изменить общую схему представления проекта.

Недостатки.

• Использование Объектно Ориентированного CSS больше всего оправдано для крупных веб-сайтов.
• Необходимость сопроводительной документации (комментариев), иначе код становиться труднодоступным для других разработчиков.

Заключение.

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