Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. HTML & CSS

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

by
Difficulty:IntermediateLength:LongLanguages:

Russian (Pусский) translation by Ilya Nikov (you can also view the original English article)

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


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

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

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

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

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

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

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

Непонятно? Давайте посмотрим немного теории.


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

Nicole Sullivan's Presentation

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

Я цитирую Николь Салливан, которая придумала объектно-ориентированный CSS. Итак, как эти два принципа работают?

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

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


Зачем мне это делать?

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

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


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

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

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

Прежде чем вы закричите «DIVITIS!» поймите, что это не так плохо, как кажется; учтите следующее:

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

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

index.htm

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

layout

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

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

Вот что у нас есть в нашем text.css:

(Шляпы отключены до 960 Grid System, чей файл text.css выделен.)

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

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

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

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

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

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

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

postext

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


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

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

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

sidebar

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

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

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

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

popout

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

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

postit

Некое подобие поста!

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

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

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

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

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

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


Комментарии

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

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

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

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

comments

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

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

commentsform

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

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


Обзор основных шагов

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

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


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

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

Я хочу немного расширить свой HTML-код, чтобы писать CSS, который можно использовать повторно, гибко и dry. Каково ваше мнение на этот счет?


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

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.