—»     —»   Знакомство с объектно-ориентированным CSS (OOCSS)
  Раздел: CSS/Style Sheets   Комментариев: 5  

Знакомство с объектно-ориентированным CSS (OOCSS)

Вы когда-нибудь встречали фразу «Контент – король»? Если вы являетесь веб-разработчиком, и ваша работа зачастую связана с созданием контента, то наверняка встречали. Это практически фундаментальное правило в деле привлечения посетителей на сайт.

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

К сожалению, большинство разработчиков, работающих в данной сфере, уделяли все больше внимания производительности javascript и другим аспектам, упуская из виду CSS.

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

Принцип OOCSS

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

Знакомство с объектно-ориентированным CSS (OOCSS)

Как было описано о OOCSS на вики-странице от GitHub, OOCSS основывается на двух фундаментальных принципах.

Отделение «шкуры» от структуры

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

Когда эти различные свойства разделены на модули, основанные на классах, их можно использовать повторно, и они могут быть применены к любому элементу, приводя к одинаковому результату. Давайте сравним некоторые из них до кода, и после кода, чтобы вы могли понять, о чем я веду речь.

Перед применением принципов OOCSS, у вас должен быть приблизительно такой код CSS:

#button {
width: 200px;
height: 50px;
padding: 10px;
border: solid 1px #ccc;
background: linear-gradient(#ccc, #222);
box-shadow: rgba(0, 0, 0, .5) 2px 2px 5px;
}

#box {
width: 400px;
overflow: hidden;
border: solid 1px #ccc;
background: linear-gradient(#ccc, #222);
box-shadow: rgba(0, 0, 0, .5) 2px 2px 5px;
}

#widget {
width: 500px;
min-height: 200px;
overflow: auto;
border: solid 1px #ccc;
background: linear-gradient(#ccc, #222);
box-shadow: rgba(0, 0, 0, .5) 2px 2px 5px;
}

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

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

.button {
width: 200px;
height: 50px;
}

.box {
width: 400px;
overflow: hidden;
}

.widget {
width: 500px;
min-height: 200px;
overflow: auto;
}

.skin {
border: solid 1px #ccc;
background: linear-gradient(#ccc, #222);
box-shadow: rgba(0, 0, 0, .5) 2px 2px 5px;
}

Теперь все элементы используют классы, а основные стили совмещены в одну «шкуру» с возможностью повторного применения, и теперь нет нужды повторно использовать ненужные отрывки кода стилей. Нам просто нужно применить класс «шкуры» ко всем элементам, и получить одинаковый результат, полученный в первом примере. Таким образом, мы можем использовать гораздо меньше кода, и получить возможность повторного использования стилей.

Разделение контейнеров и контента

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

#sidebar h3 {
font-family: Arial, Helvetica, sans-serif;
font-size: .8em;
line-height: 1;
color: #777;
text-shadow: rgba(0, 0, 0, .3) 3px 3px 6px;
}

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

В таком случае нам нужно будет сделать нечто подобное:

#sidebar h3, #footer h3 {
font-family: Arial, Helvetica, sans-serif;
font-size: 2em;
line-height: 1;
color: #777;
text-shadow: rgba(0, 0, 0, .3) 3px 3px 6px;
}

#footer h3 {
font-size: 1.5em;
text-shadow: rgba(0, 0, 0, .3) 2px 2px 4px;
}

Либо мы можем завершить чем-нибудь менее сильным:

#sidebar h3 {
font-family: Arial, Helvetica, sans-serif;
font-size: 2em;
line-height: 1;
color: #777;
text-shadow: rgba(0, 0, 0, .3) 3px 3px 6px;
}

/* other styles here.... */

#footer h3 {
font-family: Arial, Helvetica, sans-serif;
font-size: 1.5em;
line-height: 1;
color: #777;
text-shadow: rgba(0, 0, 0, .3) 2px 2px 4px;
}

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

Стили, объявленные в приведенных выше примерах при помощи потомственного селектора, не могут быть использованы повторно, так как они зависят от конкретного контейнера (в данном случае как от боковой панели, так и от подвала).

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

Пример из жизни

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

Итак, давайте рассмотрим кое-что, что было в самом начале разработки стиля шапки сайта:

.header-inside {
width: 980px;
height: 260px;
padding: 20px;
margin: 0 auto;
position: relative;
overflow: hidden;
}

Здесь приведено несколько уникальных стилей, предназначенных для элемента .header-inside. Но остальное может формировать модуль с возможностью его повторного использования. Т.е. у нас есть возможность абстрагировать структурные стили в отдельный класс для повторного использования. Вот что мы получаем в результате:

.globalwidth {
width: 980px;
margin: 0 auto;
position: relative;
padding-left: 20px;
padding-right: 20px;
overflow: hidden;
}

.header-inside {
padding-top: 20px;
padding-bottom: 20px;
height: 260px;
}

Стили, принадлежащие классу .globalwidth охватывают следующее:

* фиксированная ширина
* центрирование при помощи margin: auto
* относительное позиционирование для создания позиционирующего контекста дочерних элементов
* 20-пиксельные отступы с левой и правой стороны
* параметр overflow имеет значение hidden, что позволяет избежать видимости чрезмерного наполнения контента, выходящего за рамки.

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

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

После добавления стилей globalwidth к данным элементам, наша верстка должна выглядеть примерно так:

<header>
<div class="header-inside globalwidth">
</div>
</header>

<div class="main globalwidth">
</div>

<footer>
<div class="footer-inside globalwidth">
</div>
</footer>

Кто-то может подумать, что данный тип абстрагирования стилей приводит код HTML в беспорядок, и противоречит принципам структурирования страницы.

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

Media Object

Одним из первопроходцев в OOCSS считается Николь Салливан (Nicole Sullivan). Она создала модуль с возможностью повторного использования под названием Media Object. За счет него, судя по ее словам, можно экономить сотни строчек кода.

Знакомство с объектно-ориентированным CSS (OOCSS)

Media Object – отличный пример мощи OOCSS, так как он может состоять из медиа-элементов любого размера, и вмещать в себя контент. Хотя многие стили, которые применяются к контенту внутри него (и даже к размеру самого медиа-элемента) могут быть изменены, у самого Media Object есть основные стили, которые помогают избежать ненужных повторений.

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

Я уже ссылался на некоторые преимущества OOCSS, но давайте рассмотрим их поближе.

Быстрые веб-сайты

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

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

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

Таблицы стилей с возможностью поддержания их актуальности

За счет OOCSS, у вас вместо постоянно растущего документа CSS с постоянными нестыковками в семантике будет удобный набор модулей, которые можно использовать по востребованию.

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

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

Эти преимущества также позволят вам расширить свои возможности по отношению к каскадным таблицам. Так как стили теперь модульные, даже новым разработчикам будет просто разобраться в структуре страницы.

То, что следует знать

OOCSS уже породил большие споры в сообществах, и разделил разработчиков на сторонников и противников. Давайте попробуем хоть немного разобраться с некоторыми основными недоразумениями.

Вы по-прежнему можете использовать ID

Если вы решите всецело посвятить себя OOCSS, то ваши стили по большей части будут основаны на CSS-классах, и вам не понадобится использовать ID.

Именно по этой причине многие ошибочки сделали выводы о том, что OOCSS принуждает вас отказываться от ID. Это мнение неверно.

Здесь правило заключается в том, чтобы не использовать ID в селекторах. Т.е. как раз идеально то, что можно применять принципы OOCSS (и избегать при этом стилизации при помощи селекторов ID), и при этом применять ID в коде HTML для javascript или в качестве идентификаторов фрагментов кода.

Конечно же, вы можете встретить ситуацию, когда вы уже применили ID к элементу, в уникальности которого вы уверены. Итак, вы можете сэкономить пару байтов, не добавляя класс к этому элементу. Поэтому вместо стиля он будет использовать ID селектор. Но даже в этой ситуации гораздо безопаснее будет положиться на класс. Это позволит вам быть уверенными в том, что у вас не возникнет проблем в будущем.

Работа с маленькими проектами

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

Тем не менее, я думаю, что пора бы уже хотя бы на самом минимальном уровне задумываться о внедрении OOCSS в свои проекты. Как только вы овладеете данной техникой, я уверен, что вам будет значительно проще работать с большими серьезными проектами, где выгода от применения будет очень заметна.

Небольшое руководство по применению

Спешу предупредить, что можно потратить достаточно времени, прежде чем вы сможете искусно оперировать OOCSS. Я до сих пор до конца не освоился, поэтому вряд ли смогу отвечать на ваши вопросы в данной области.

Но вот что вам следует уяснить с самого начала. Это поможет вам влиться в работу с OOCSS:

* Избегайте понижающего селектора (т.е. не используйте .sidebar h3)
* Не используйте ID для стилизации
* Не прикрепляйте классы к элементам в таблицах стилей (т.е. не используйте div.header или h1.title)
* За исключением редких случаев, старайтесь не использовать !important
* Используйте CSS Lint для проверки кода CSS (и заранее будьте готовы к безумным настройкам)
* Используйте сеточные CSS

Конечно же, будут случаи, когда некоторые из этих правил нужно (или можно) будет нарушить. Но в целом, все эти знания и навыки выведут вас на новый уровень разработки.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: CSS
Опубликовал Design FactoRy   Прочитано (раз): 11230   |   Оставлено комментариев: 5
Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Комментарий #1: 2 февраля 2012 @ 12:56
Написал: huligan319 — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Да многие сайты грузятся очень долго, хотя и рекламой не нагружены, нужны конкретные меры для облегчения страниц. Возьму данную статью на заметку!
Комментарий #2: 2 февраля 2012 @ 13:16
Написал: ITS — группа: Читатели  
На сайте с: 20.02.2010   |   Публикаций: 3   |   Комментариев: 127
ICQ: 366337851
huligan319, да ) от примеров и я не отказался бы.


--------------------
Вещам, которым надо бы учиться, чтобы их делать, — лучше учиться, делая их.
© Аристотель
Комментарий #3: 3 февраля 2012 @ 11:22
Написал: senator3821 — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Спасибо за программу, как говорится это "именно то, что доктор прописал", действительно нужная вещь, рекомендую всем....
Комментарий #4: 3 февраля 2012 @ 13:12
Написал: inferus-vv — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Я знаю, что так нужно делать, но почему то не делаю. Это долго и лениво. Хотя иногда бывает очевидно, что код в разных id и class повторяется и его следует совместить в одном классе
Комментарий #5: 9 февраля 2012 @ 09:40
Написал: Night_Pilgrim — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
belay а работает во всех браузерах?
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц October по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Спонсоры проекта
Баннер в сайдбаре 1 (сквозной)
Баннер в сайдбаре 2 (сквозной)
Спонсоры проекта
Баннер в сайдбаре 3 (сквозной)
Баннер в сайдбаре 4 (сквозной)
Популярные публикации







Свежие шаблоны сайтов каждый день
С миру по нитке
«    Март 2024    »
ПнВтСрЧтПтСбВс
 123
45678910
11121314151617
18192021222324
25262728293031