Вы когда-нибудь слышали фразу “ Содержимое King”?Быть веб-разработчиком, и, следовательно, иметь работу that’ S часто связаны с созданием контента, it’ S вероятно, что вы.It’ SA довольно злоупотребляют, но верное утверждение о том, что привлекает посетителей в site.
От Web developer’ с точки зрения, однако, некоторые могут возразить, что Скорость king.Все больше и больше I’ м, начиная в пользу этой позиции.В последние годы многие опытные интерфейсных инженеры предложили свои suggestions о том, как мы можем улучшить работу пользователей с помощью некоторых производительности best practices.
К сожалению, CSS, кажется, получается что-то упускается из виду в этой области, в то время как многие разработчики (по уважительной причине) сосредоточены главным образом на производительности JavaScript и другие areas.
В этом посте I’ VL дело с этим часто упускается из виду район познакомить вас с концепцией объектно-ориентированных CSS и как она может помочь повысить как производительность и управляемость веб-pages.
Принципы OOCSS
Как с любым объектно-ориентированного метода кодирования, цель OOCSS является поощрение повторного использования кода и, в конечном счете, более быстрый и эффективный стилей, которые легче добавлять и maintain.
Как описано на OOCSS GitHub repo’ S Wiki page, OOCSS основана на двух основных principles.
Разделение структуры от Skin
Почти каждый элемент в стиле веб-страница имеет различные визуальные характеристики (т.е. “ skins”), которые повторяются в различных контекстах.Подумайте о website’ брендинг с — цвета, тонкие использование градиентов, или видимых границ.С другой стороны, другие вообще невидимы характеристик (т.е. “ structure”) также являются repeated.
Когда эти различные функции абстрагируются в классе на основе модулей, они становятся reusable и может быть применен к любому элементу и имеют те же основные результаты.Let’ сравним некоторые до и после кода, таким образом Вы можете видеть, что I’ говорю about.
Перед нанесением 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;
}
Трех элементов выше, имеют стили, которые являются уникальными для каждого, и they’ повторно применяться с одноразовых ID селектор для определения стилей.Но они также имеют ряд стилей в общем.Общие стили могут существовать для брендинга целей илисогласованность design.
С немного планирования и предусмотрительности, мы можем абстрагироваться от общих стилей 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;
}
Сейчас все элементы с использованием классов, общий стиль объединены в многоразовых “ skin” и ничего не излишне повторять.Нам просто нужно применять “ skin” класс для всех элементов и результат будет тот же, что и в первом примере будет производить, кроме как с меньше кода и возможностью для дальнейшего reuse.
Разделение контейнеры и Content
Второй принцип, описанный на OOCSS 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;
}
Сейчас we’ Re необходимости дублирования styles, и, возможно, не понимают этого (или просто don’ T помощи).С OOCSS, we’ повторно призвал уделять больше предусмотрительности на то, что является общим между различными элементами, то отделить эти общие черты в модули или объекты, которые могут быть повторно использованы anywhere.
Стили, которые объявляются с помощью селектора потомка в эти примеры выше Не reusable., Потому что они зависят от конкретного контейнера (в данном случае либо боковой или нижней)
Когда мы используем OOCSS’ S класса-модуль на базе здания, мы гарантируем, что наши стили не зависят от любых содержащих элемент.Это означает, что они могут быть повторно anywhere В документе, независимо от структурных context.
Real-World Example
Для дальнейшей иллюстрации того, как OOCSS могут быть использованы, I’ буду использовать нечто похожее на то, что я сделал на __ +32 | моя site’ недавнем redesign.После кодирования внутренних элементов заголовка на мой сайт, я поняла, что основные структурные стили для внутренней части заголовка может быть использовано на другие элементы на page.
Так here’ S что-то вроде того, что у меня было, когда я начал укладку мой заголовок:
.header-inside {
width: 980px;
height: 260px;
padding: 20px;
margin: 0 auto;
position: relative;
overflow: hidden;
}
Несколько стилей, перечисленные здесь являются уникальными для .header-inside элемент.Но остальные могут образовывать модуль, который я могу использовать повторно.Так что я могу абстрактных структурных styles в свои многоразового класса.Here’ с результатом:
.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 класса охватывают следующие аспекты:
- Фиксированной width
- Центрирование с помощью маржи: auto
- Относительное позиционирование создать контекст позиционирования для детей elements
- Левый и правый отступы 20px
- Переполнения установлен в “ hidden” дляclearfixing
Сейчас we’ Re свободно использовать эти стили на любой элементы, которые требуют эти же характеристики, просто добавив, что класс нужный элемент — без написания дополнительного линии CSS.
Для моего сайта, я повторно эти структурные стили на первичный элемент содержания и внутренней колонтитула элемента.В зависимости от конструкции, эти стили можно применить и к горизонтальным элементом навигации, которые могут возникнуть между заголовком и содержанием, или любой другой элемент, который имеет фиксированную ширину и должно быть сосредоточено на page.
После добавления “ globalwidth” стили этих элементов, разметка будет выглядеть примерно так:
<header>
<div class="header-inside globalwidth">
</div>
</header><div class="main globalwidth">
</div><footer>
<div class="footer-inside globalwidth">
</div>
</foo ...
Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров