Перевод статьи: 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 огромное будущее в сфере веб-разработки. Эта концепция должна получить полную поддержку разработчиков и использоваться ими в своих продуктах полномасштабно. Надеюсь, что эта статья поспособствовала дальнейшему развитию вашего мастерства и поможет повысить качество ваших будущих проектов.