Основы объектно-ориентированного CSS (OOCSS)
Разработка интерфейса движется быстро, каждый год добавляется много новых технологий. Для разработчиков может быть трудно не отставать от всего. Между Sass и PostCSS легко потеряться в море инструментов разработки.
Одним из более новых методов является объектно-ориентированный CSS, также называемый OOCSS для краткости. Это не инструмент, а скорее методология написания CSS, которая направлена на сделать CSS модульным и объектно-ориентированным.
В этом посте я хотел бы представить основные принципы OOCSS, а также как эти идеи могут быть применены к веб-интерфейсу. Этот метод может не понравиться каждому разработчику, но стоит понять новые концепции, чтобы решить, может ли ваш рабочий процесс извлечь из этого пользу.
Что делает CSS объектно-ориентированным?
Объектно-ориентированное программирование (ООП) - это парадигма программирования, ориентированная на создание многоразовых объектов а также установление отношений между ними, в отличие от процедурного программирования, которое организует код в процедуры (подпрограммы, подпрограммы или функции).
ООП стал широко использоваться в обоих JavaScript и внутренние языки в последние несколько лет, но организация CSS в соответствии с его принципами все еще является новой концепцией.
“объект” в OOCSS относится к Элемент HTML или что-нибудь связанное с этим (например, классы CSS или методы JavaScript). Например, у вас может быть объект виджета на боковой панели, который можно реплицировать для различных целей (регистрация в новостной рассылке, рекламные блоки, недавние публикации и т. Д.). CSS может нацеливаться на эти объекты массово что делает масштабирование бризом.
Подводя итог записи OOCSS GitHub, объект CSS может состоять из четырех вещей:
- HTML-узел (-ы) DOM
- CSS объявления о стиле этих узлов
- Компоненты, такие как фоновые изображения
- Поведение JavaScript, слушатели или методы, связанные с объектом
Вообще говоря, CSS является объектно-ориентированным, когда считает классы, которые можно использовать повторно а также нацеливается на несколько элементов страницы.
Многие разработчики сказали бы, что OOCSS легче поделиться с другими, и его легче подобрать после нескольких месяцев (или лет) неактивной разработки. Это сравнивается с другими модульными методами, такими как SMACSS, который имеет более строгие правила для классификации объектов в CSS.
Страница часто задаваемых вопросов OOCSS содержит множество информации, если вам интересно узнать больше. И создатель Николь Салливан часто говорит об OOCSS и о том, как он связан с современной веб-разработкой..
Отдельная структура от стиля
Большая часть OOCSS - это написание кода, который отделяет структуру страницы (ширину, высоту, поля, отступы) от внешнего вида (шрифты, цвета, анимации). Это позволяет пользовательские скины быть примененным к нескольким элементам страницы не влияя на структуру.
Это также полезно для разработки компонентов, которые могут быть переехал вокруг макета с легкостью. Например, “Недавние Посты” виджет на боковой панели должен быть перемещен в нижний колонтитул или над содержимым при сохранении схожих стилей.
Вот пример OOCSS для “Недавние Посты” виджет, который в данном случае является нашим объектом CSS:
/ * Структура * / .side-widget ширина: 100%; отступы: 10px 5px; / * Skinning * / .recent-posts font-family: Helvetica, Arial, sans-serif; цвет: # 2b2b2b; Размер шрифта: 1.45em;
Заметить, что расположение управляется с .бок-виджет класс, который может быть применен к нескольким элементам боковой панели, в то время как внешний вид управляется с .Недавние Посты класс, который также может быть использован для оформления других виджетов. Например, если .Недавние Посты виджет был перемещен в нижний колонтитул, он может не иметь одинакового расположения, но он может выглядеть и выглядеть одинаково.
Также взгляните на этот пример боковой панели из CodePen. Он использует четкое разделение классов для поплавков и выравнивания текста, так что репликация не потребует дополнительного кода CSS.
Отдельный контейнер от содержимого
Отделение контента от его элемента контейнера еще один важный принцип OOCSS.
Проще говоря, это только означает, что вы должны избегать использования дочерних селекторов, когда это возможно. При настройке любых уникальных элементов страницы, таких как якорные ссылки, заголовки, цитаты или неупорядоченные списки, вы должны давать им уникальные классы, а не селекторы потомков.
Вот простой пример:
/ * OOCSS * / .sidebar / * содержимое боковой панели * / h2.sidebar-title / * специальные стили элемента h2 * / / * Non-OOCSS * / .sidebar / * то же содержимое боковой панели * / .sidebar h2 / * добавляет больше специфичности, чем необходимо * /
Хотя использование второго формата кода не является ужасным, настоятельно рекомендуется следовать первому формату, если вы хотите написать чистый OOCSS.
Руководство по разработке
Трудно точно определить точные спецификации, потому что разработчики постоянно обсуждают цель OOCSS. Но вот некоторые предложения, которые могут помочь вам написать более чистый код OOCSS:
- Работать с классы вместо идентификаторов для укладки.
- Пробовать воздерживаться от многоуровневой специфичности класса потомков если не нужно.
- определять уникальные стили с повторяемыми классами (например, float, clearfix, уникальные стеки шрифтов).
- Расширить элементы с целевыми классами а не родительские классы.
- Организуйте свою таблицу стилей на разделы, рассмотреть возможность добавления оглавления.
Обратите внимание, что разработчики все еще должны использовать идентификаторы для ориентации JavaScript, но они не требуются для CSS, потому что они слишком специфичны. Если один объект использует идентификатор для стилевого оформления CSS, он никогда не сможет реплицироваться, поскольку идентификаторы являются уникальными идентификаторами. Если вы используете только классы для стиля, то наследование становится намного проще прогнозировать.
Кроме того, классы могут быть объединены в цепочку для дополнительных функций. К одному элементу может быть прикреплено более 10 классов. Хотя более 10 классов для одного элемента я не рекомендую лично, это позволяет разработчикам накопить библиотеку повторно используемых стилей для неограниченного количества элементов страницы..
Имена классов в OOCSS несколько противоречивы и не задеты в камне. Многие разработчики предпочитают, чтобы занятия были короткими и точными.
Чехол для верблюда также популярен, например .errorBox вместо .Ошибка ящика. Если вы посмотрите на именование классов в документации OOCSS, вы заметите, что “официальный” рекомендация. В тире нет ничего плохого, но, как правило, лучше всего следовать рекомендациям OOCSS.
OOCSS + Sass
Большинство веб-разработчиков уже любят Sass, и он быстро обогнал внешнее сообщество. Если вы еще не пробовали Sass, стоит попробовать. Это позволяет вам писать код с переменными, функциями, методами вложения и компиляции, такими как математические функции..
В компетентных руках Sass и OOCSS могли бы быть матчем на небесах. Вы найдете отличную статью об этом в блоге The Sass Way..
Например, используя Sass @extend Директива вы можете применить свойства одного класса к другому классу. Свойства не дублируются, но вместо этого два класса объединяются с помощью селектора запятой. Таким образом, вы можете обновить свойства CSS в одном месте.
Если вы постоянно пишете таблицы стилей, это сохранит часы набора текста и помочь автоматизировать процесс OOCSS.
Также помните, что поддержка кода является большой частью OOCSS. С помощью Sass ваша работа становится проще благодаря переменным, миксинам и расширенным инструментам рисования, связанным с рабочим процессом..
Ключевым атрибутом отличного кода OOCSS является возможность поделиться этим с кем-либо, даже себя на более поздний срок, и сможете с легкостью поднять его.
Вопросы производительности
OOCSS предназначен для бесперебойной работы и без путаницы. Разработчики стараются изо всех сил не повторять себя на каждом шагу, на самом деле, это является предпосылкой развития DRY. Со временем метод OOCSS может привести к сотням классов CSS с индивидуальными свойствами, применяемыми десятки раз в данном документе..
Поскольку OOCSS по-прежнему является новой темой, трудно спорить на тему раздувания. Многие файлы CSS в конечном итоге раздуты с небольшой структурой, тогда как OOCSS обеспечивает жесткую структуру и (в идеале) меньше раздувания. Наибольшая проблема производительности будет в HTML, где некоторые элементы могут накапливать несколько разных классов для структуры макета и дизайна..
Вы найдете интересные дискуссии по этой теме на таких сайтах, как Stack Overflow и CSS-Tricks..
Моя рекомендация - попытаться создать пример проекта и посмотреть, как он будет работать. Если вы влюбитесь в OOCSS, это может радикально изменить то, как вы кодируете сайты. В качестве альтернативы, если вы ненавидите это, вы все еще изучаете новую технику и критически думаете о том, как она работает. Это беспроигрышно, несмотря ни на что.
Занять Письмо OOCSS
Лучший способ научиться чему-либо в веб-разработке - это практиковаться. Если вы уже понимаете основы CSS, значит, вы уже на своем пути!
Поскольку OOCSS не требует предварительной обработки, вы можете попробовать его с помощью онлайновой IDE, такой как CodePen. Простые проекты - лучшее для того, чтобы начать и улучшить свои знания оттуда.
Взгляните на эти ресурсы, чтобы продолжить ваши исследования в развивающейся области OOCSS.
- Официальный сайт OOCSS
- Объектно-ориентированный CSS: что, как и почему
- OOCSS + Sass = Лучший способ CSS
- Введение в объектно-ориентированный CSS
