Тем не менее, некоторые веб-разработчики могут оспорить данное утверждение тем, что важнее скорость. И мне, кстати, все больше и больше начинает нравиться именно эта точка зрения. За последние годы многие специалисты предлагали различные способы увеличения производительности работы веб-сайтов, что, несомненно, привлекало новый качественный трафик.
К сожалению, большинство разработчиков, работающих в данной сфере, уделяли все больше внимания производительности javascript и другим аспектам, упуская из виду CSS.
Сегодня же я хочу направить ваше внимание как раз на упущенный аспект – Объектно-ориентированный CSS, а также рассказать вам о том, каким образом это может помочь вам повысить производительность и возможность поддержания веб-страниц.
Принцип OOCSS
Как и в любом объектно-ориентированном кодинге, целью 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. За счет него, судя по ее словам, можно экономить сотни строчек кода.
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
Конечно же, будут случаи, когда некоторые из этих правил нужно (или можно) будет нарушить. Но в целом, все эти знания и навыки выведут вас на новый уровень разработки.