OOCSS

Monday, February 25, 13

Избегать двойников

«у нас уже есть

похожий элемент»

Heading 1Heading 2Heading 3

Heading 4Heading 5

HEADING 6

Monday, February 25, 13

Location-dependent

Monday, February 25, 13

function square()

Monday, February 25, 13

function square()

Monday, February 25, 13

это неправильно

Monday, February 25, 13

но в CSS это постоянно

Monday, February 25, 13

Заголовок не должен стать заголовком в другой части страницы

Monday, February 25, 13

Плохо

• В новых модулях заголовок будет без стиля

• Надо будет снова его стилизовать - усилия

.module1 h3 {color:red}

.weathermodule2 h3{color:blue}

Monday, February 25, 13

Лучше, но

• не сможем использовать все стили в одном модуле

• трудно сделать зеленый заголовок внутри модуля

• Красный и синий нельзя сделать вне модулей

h3 {color:green;}

.module1 h3 {color:red}

.weathermodule h3{color:blue}

Monday, February 25, 13

А можно так

• Стили по умолчанию есть

• Гибкость, предсказуемость и семантика <h3 class="h1"></h3>

.h1,h1 {}

.h2,h2 {}

.h3,h3 {}

.h4,h4 {}

.h5,h5 {}

.h6,h6 {}

Monday, February 25, 13

Избегать CSS для тагов

• Если только это не стили по умолчанию

div {}

ul {}

.module ul {}

Monday, February 25, 13

Вес селекторов

• Сохранять примерно один вес

html .content .module .ul {}

.module .block {}

Monday, February 25, 13

Вес селекторов

• Сохранять примерно один вес

html .content .module .ul {}

.module .block {}

Monday, February 25, 13

Вес селекторов

• Сохранять примерно один вес

html .content .module .ul {}

.module .block {}

.weather .ul {}

.module .block {}

Monday, February 25, 13

Избегать контекста

• Модифицировать сам объект

.main ul {}

.sidebar ul{}

Monday, February 25, 13

Избегать контекста

• Модифицировать сам объект

.main ul {}

.sidebar ul{}

Monday, February 25, 13

Избегать контекста

• Модифицировать сам объект

.main ul {}

.sidebar ul{}

.mainNav {}

.subNav {}

Monday, February 25, 13

Вёрстка по модулям

• Разбить сайт на области и верстать их как отдельные элементы «в себе»

Monday, February 25, 13

Monday, February 25, 13

Monday, February 25, 13

Monday, February 25, 13

Monday, February 25, 13

Monday, February 25, 13

Monday, February 25, 13

Monday, February 25, 13

Раньше так:div#myBlock

Monday, February 25, 13

Обычный блок

#myBlock h2{...}

#myBlock ul{...}

#myBlock p{...}

#myOtherBlock ul{...}

#myOtherBlock li{...}

ul

p

h2

div#myBlock

Monday, February 25, 13

Спустя неделю

«Ой, а давайте в погоде сделаем список как в блоке аналитики?»

«А еще, нам нужно два таких блока, только с разным фоном»

Monday, February 25, 13

Fail

#myModule h2{...}

#myModule span{...}

#myModule #saleModule{...}

#myOtherModule ul{...}

#myOtherModule li{...}

ul

p

h2

Приведет к грязному коду

Monday, February 25, 13

Правильный подход

.block{...}

.heading{...}

.list{...}

.more{...}

.list

.more

.heading

.block

Monday, February 25, 13

Модифицируем блоки

Monday, February 25, 13

Модифицируем блоки

ul.list ul.list .with-image

Monday, February 25, 13

И?

Monday, February 25, 13

ul.list

.more

h2.heading h2.heading

ul.list

h2.heading

ul.list .with-image

.more

ul.switcher

Monday, February 25, 13

Facebook

• Очень много простых стилей• Комбинации классов• Вы еще думаете о семантике классов? :)

Monday, February 25, 13

Monday, February 25, 13

Читать

• https://github.com/stubbornella/oocss/wiki

Monday, February 25, 13