Объектно-ориентированный CSS: что, как и почему

Это звучит как оксюморон или, по крайней мере, невозможно, не так ли? Как статический язык, который действительно больше похож на разметку, чем на программирование, может быть объектно-ориентированным? В этом уроке я познакомлю вас с идеей объектно-ориентированного CSS, покажу, как он работает, и попытаюсь убедить вас, что вы тоже должны его использовать!

Что такое объектно-ориентированный CSS?

Объектно-ориентированный CSS, по своей сути, просто чище, DRY er CSS. Это не другой язык: все тот же старый CSS, который мы все знаем и любим. Это просто смена парадигмы. Действительно, объектно-ориентированный CSS — это несколько простых шаблонов и лучших практик.

Так зачем называть это объектно-ориентированным? Ну, согласно Википедии ,

Объектно-ориентированное программирование (ООП) — это парадигма программирования, которая использует «объекты» — структуры данных, состоящие из полей данных и методов — и их взаимодействия для разработки приложений и компьютерных программ.

Если бы мы переписали это определение для объектно-ориентированного CSS, это могло бы сказать что-то вроде этого:

Объектно-ориентированный CSS — это парадигма кодирования, которая стилизует «объекты» или «модули» — нестабильные куски HTML, которые определяют раздел веб-страницы, — с помощью надежных, многократно используемых стилей.

Это в основном означает, что у вас есть стандартный «объект» (структура HTML). Затем у вас есть CSS-классы, которые вы применяете к объектам, которые определяют дизайн и поток объекта.

Смущенный? Давайте посмотрим немного теории.

Какая теория стоит за этим?

Существует два основных принципа [в объектно-ориентированном CSS]: первый — отделить структуру от оболочки, а второй — отделить контейнер от содержимого.

Я цитирую Николь Салливан , чье детище является объектно-ориентированным CSS. Так как же эти два принципа себя играют?

Отделение структуры от обложки означает, что ваш стиль макета и стиль дизайна разделены. Один очень практичный способ сделать это — использовать систему сетки; Есть много вариантов , или вы можете создать свой собственный. Если вы не используете сеточную систему, вы, вероятно, просто определите структуру первичного объекта на своей странице; это то, что мы будем делать сегодня.

Отделение контейнера от содержимого означает, что любой объект (контейнер) должен иметь возможность адаптироваться к любому контенту; например, он не должен иметь h3 вверху, за которым следует неупорядоченный список, чтобы он выглядел правильно. Это обеспечивает гибкость и возможность повторного использования, что имеет первостепенное значение.

Почему я должен кодировать таким образом?

Есть несколько веских причин, почему вы хотели бы написать свой CSS объектно-ориентированным способом. Одним из самых больших преимуществ — и мы уже упоминали об этом — является то, что ваш CSS будет более пригодным для повторного использования. Но ваши таблицы стилей также должны стать намного меньше. Объектно-ориентированный CSS должен облегчить изменение дизайна сайта.

Написание вашего стиля таким образом также может дать вам душевное спокойствие: вам будет намного легче менять части вашего сайта, не ломая вещи. Объектно-ориентированный CSS также позволяет последовательно изменять ваш сайт.

Как мне практиковать объектно-ориентированный CSS?

Что ж, если вы зашли так далеко, вас интересует, как именно вы пишете CSS с объектно-ориентированным мышлением. Вот так!

Первый шаг — это действительно подготовка к CSS: вы должны определить свой HTML-объект. Как правило, ваш объект будет иметь заголовок, тело и нижний колонтитул, хотя верхний и нижний колонтитулы не являются обязательными. Вот очень простой объект.

Прежде чем кричать «DIVITIS!» понять, что это не так плохо, как кажется; учти это:

Используя HTML5, у нас теперь есть объект с семантическим значением и без супеподобных характеристик. На самом деле, это объект, который мы будем использовать сегодня.

Если мы собираемся написать немного CSS, нам нужно что-то стилизовать, поэтому давайте создадим очень простой шаблон: домашнюю страницу блога и страницу с одним постом. Сегодня мы будем использовать несколько элементов HTML5 и некоторые стили CSS3!

index.htm

Я знаю, что это довольно долго, поэтому вот схема нашей базовой структуры:

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

Вы заметите, что мы ссылаемся на три таблицы стилей: reset.css, text.css и styles.css. Reset.css — это сброс Эрика Мейера . Text.css важен: второй шаг объектно-ориентированного CSS — это стилизация нескольких основных элементов; обычно это текстовые элементы, такие как заголовки и списки. Стилизация этих объектов важна, потому что она определяет непротиворечивый внешний вид сайта; эти элементы, по большей части, не получат никакого дополнительного прямого стиля.

Вот что мы получили в нашем text.css:

(Снимаю шляпу перед 960 Grid System , чей файл text.css отключен.)

Теперь мы начнем строить styles.css; Здесь начинается объектно-ориентированная магия. Однако сначала я добавлю несколько стилей верхнего уровня, просто чтобы установить фон тела и некоторые стили ссылок и списков.

Наш первый заказ — определить структуру страницы:

Обратите внимание, что мы стилизуем наш контейнерный объект, начиная все наши селекторы с #container. Тем не менее, это особый случай: обычно вы захотите использовать классы, потому что они свободно используются повторно.

Мы можем использовать селекторы классов для нашего пост-стиля:

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

Кроме того, мы разработали стили всех элементов, участвующих независимо: родительские элементы не требуют, чтобы определенные дочерние элементы выглядели правильно; хотя у нас есть стилизованные дочерние элементы, ничего не сломается, если их там нет. И дочерние элементы, по большей части, не зависят от своих родителей; Я не стилизовал h2 в пост-объекте, потому что он должен быть одинаковым для всего сайта; мы уже позаботились об этом в text.css.

Есть еще один важный момент, наиболее похожий на объектно-ориентированное программирование: расширенные классы. Возможно, вы видели, что у нас есть стили для .post img и .post.ext img. Я уверен, что вы знаете, что они будут делать, но вот доказательство:

Просто добавив другой класс к вашему объекту, вы можете изменить второстепенные части внешнего вида; Я должен отметить, что Николь Салливан создала бы класс с именем .postExt, а затем применила бы оба к объекту; Я предпочитаю делать это таким образом, потому что это позволяет мне использовать одно и то же имя класса («ext») для всех моих расширений, и я думаю, что это делает HTML более чистым. Вы просто должны помнить, чтобы не ставить пробел в селекторе; «.post .ext» будет искать элемент в классе ext внутри элемента в классе post. Без пробела он будет искать элемент в обоих классах.

На боковой панели

Теперь, когда у нас есть основная область содержимого, давайте посмотрим на боковую панель. У нас есть два объекта на боковой панели: список архивов и список последних комментариев. Для начала мы создадим класс .side-box для них:

Опять же, вы должны принять к сведению, что мы соблюдаем два правила: мы отделили структуру от оболочки, не устанавливая высоту или ширину; объект течет, чтобы заполнить любое пространство, которое ему нужно занять. И мы отделили контейнер от содержимого, не делая дочерние элементы необходимыми для правильного оформления. Да, я настроил стиль h3, что делает этот конкретный h3 зависимым от бокса класса; в большинстве случаев это нежелательно, но в этом случае я не сделал слишком много.

Но давайте создадим расширение для этого; однако, поскольку мы хотим сделать большую визуальную корректировку, мы не будем расширять класс side-box напрямую; мы создадим новый класс.

Так, что это делает? Обратите внимание на селектор: мы нацеливаемся на каждый элемент непосредственно внутри тела нашего объекта; при стилизации объекта вы всегда применяете класс к самому объекту. Этот CSS будет «выталкивать» контент вправо.

«ЭЙ, вы установили ширину! Как насчет отделения struture от кожи?» Я установил ширину, потому что мы нацеливаемся на элементы внутри тела нашего объекта; поскольку объект имеет отступ, этот внутренний элемент сам по себе немного узок. Это звучит как оправдание для нарушения правила, но я не думаю, что я действительно нарушил правило: я установил ширину в процентах, которая все еще зависит от стилизации структуры вверх по каскаду.

Вот как это выглядит.

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

Вы заметите, что мы дали заголовку нашего недавнего объекта комментариев класс с именем ‘post-it’. Давайте создадим этот класс сейчас.

Плохое подобие пост-ноты!

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

Не блокируйте свои селекторы; никогда не знаешь, когда ты захочешь эти стили!

Часто вы хотите пойти дальше, чем просто классы верхнего и нижнего колонтитула; библиотека компонентов — огромная часть объектно-ориентированного CSS; основное правило может быть таким: всякий раз, когда вы хотите применить один и тот же стиль в нескольких несвязанных местах, абстрагируйтесь. Конечно, после жесткого кодирования чего-либо в объект вы можете обнаружить, что было бы более полезно, если бы вы могли использовать его где-то еще; не бойтесь рефакторинга. Это всегда в ваших интересах.

Вы увидите эти компоненты в заголовке страницы и в окне последних комментариев.

Ну, мы закончили с нашей страницей индекса; давайте рассмотрим немного больше объектно-ориентированного подхода на одной странице поста. Просто скопируйте эту индексную страницу, переименуйте ее в «post.htm» и замените заголовок и раздел страницы для этого кода.

Теперь мы можем видеть, где появляется возможность повторного использования; мы можем использовать класс post для публикации в блоге здесь; это тот же класс записей, который мы использовали для домашней страницы; поскольку мы не указали структуру, но позволили объекту расширяться, чтобы принять то, что мы ему даем, он может обрабатывать весь пост.

Комментарии

Теперь давайте обратим наше внимание на комментарии на этой странице; комментарии — отличное место для использования объектно-ориентированного CSS. Начнем с добавления этого:

Одно это дает нам некоторые псевдо-привлекательные комментарии; но мы можем сделать больше. В нашем HTML есть классы для ответов и комментариев авторов.

Убедитесь, что между двумя именами классов нет пробела. Это немного отличается от того, что мы делали ранее: вместо изменения стиля класса комментария мы фактически расширяем его (так что, возможно, это настоящие расширенные классы).

И готовые комментарии. , ,

И пока мы здесь, давайте добавим форму комментария в нашу библиотеку компонентов.

Это дает нам хорошую форму закругленного угла с мягким эффектом наведения.

Я как бы разрываюсь здесь; фундаментальная концепция объектно-ориентированного CSS — это возможность добавлять класс к различным элементам; а как насчет этого дела? Этот класс был бы бесполезен ни для чего, кроме формы; мы должны поменять селекторы на form.comments-form как своего рода безопасность? Как вы думаете?

Ну, это действительно охватывает идеи объектно-ориентированного CSS.

Ознакомьтесь с основными шагами

1. Определите свой объект.
2. Установите ваш сброс, базовые элементы и стили базовых объектов.
3. Применяйте классы к объектам и компонентам для желаемого внешнего вида.

Я не использовал стандартный пример сообщения, но это действительно отличный способ попасть в объектно-ориентированный CSS. Попробуйте создать класс сообщений, который можно применять к различным элементам, таким как абзац, элемент списка или полный объект. Затем дополните его классами ошибок, предупреждений и информации. Посмотрите, насколько гибкими и многоразовыми вы можете сделать это.

Всегда ли полезен объектно-ориентированный CSS?

Я не думаю, что ответом на этот вопрос является простое «да» или «нет»; Вероятно, это связано с тем, что объектно-ориентированный CSS — это не язык, а набор шаблонов и рекомендаций. Возможно, вы не всегда хотите применять идею стандартного объекта HTML, но большинство принципов CSS всегда действительны. Если вы подумаете об этом, вы увидите, что это действительно то, где вы хотите оптимизировать: вы можете минимизировать код HTML, используя несколько идентификаторов для дескрипторов, и иметь возможность легко его стилизовать; но CSS не будет использоваться повторно, и сайт может сломаться позже, когда вы придете, чтобы что-то изменить. Или вы можете написать немного больше HTML и оптимизировать CSS с помощью принципов, которые мы рассмотрели в этом руководстве.

Я хочу немного расширить свой HTML, чтобы я мог писать CSS, который можно использовать повторно, гибкий и СУХОЙ. Каково твое мнение?

Другие источники

• Сообщение в блоге Николь Салливан на OOCSS
• OLCSS-структура Салливана на Github
• И ее презентация на OOCSS