OOCSS. Утилиты

Февраль 18, 2014 ||  oocss ||  комментарии

Обьектно-ориентированный CSS, он же яндексовый метод БЕМ, он же SMACSS, это находка, благодаря которой в верстку пришел порядок. Ну почти. Особенно это очевидно на больших проектах которые переделываются не один раз. Но об этом уже много говорилось, добавить уже нечего. Я хочу рассказать о некоторых проблемах при работе c этой идеологией.

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

.tutorials div.tutorialIndexImg {
    text-align: center;
}

Мало того что непонятно для чего нужная каскадность да еще и тривильное выравнивание по центру.

По началу идельного порядка у меня не получалось добиться. Всегда в дизайне присутствуют какие то непонятные элементы которые не поймешь куда девать и которые вроде бы не тянут на самостоятельный модуль. Например такой блок-линк "Знаете промкод ...":

what's this

Или:

what's this

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

unclear

Можно сделать модификатор иконок, но что если такая же логика - раздвинуть/сдвинуть готовые модули, нужна где то в других местах и с другими модулями.

В общем случае проблема формулируется так - что делать когда нужна маленькое изменение существующего модуля которое не тянет на модификатор. Либо тянет но ты понимаешь что ты модифицируешь уже пятый модуль для одной и той же цели - margin-left: 5px. Как минимум мусор и повторение.

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

.box-block{
    dispay: block;
}
.box-space{
    margin-bottom: $base-whiteS1pace;
}
.box-msize{
    width: 75%;
}
.box-centered{
    margin-left: auto;
    margin-right: auto;
}
.box-left{
    float: left;
}

Потом я натолкнулся на фреймворк MVCSS. Если покопаться в нем то можно найти следующее:

%l-block, .l-block
  display: block

%l-condense, .l-condense
  margin-bottom: rem($base-whitespace / 2)

%l-pullLeft, .l-pullLeft
  float: left

%l-pullRight, .l-pullRight
  float: right

%l-space, .l-space
  margin-bottom: rem($base-whitespace)

Я понял что изобретаю велосипед. Вот еще для изучения интересный фреймворк от Nicolas Gallagher - SuitCSS. В нем идея вспомогательных утилит доведена до совершенства).

К примеру space.css:

.u-paddingAn { padding: 0 !important; }
.u-paddingAs { padding: 5px !important; }
.u-paddingAm { padding: 10px !important; }
.u-paddingAl { padding: 20px !important; }

.u-marginAn { margin: 0 !important; }
.u-marginAs { margin: 5px !important; }
.u-marginAm { margin: 10px !important; }
.u-marginAl { margin: 20px !important; }

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

.l-space{
    margin-bottom: 20px
}
.l-mspace{
    margin-bottom: 30px
}
.l-xspace{
    margin-bottom: 40px
}
.l-xlspace{
    margin-bottom: 60px
}

Под расширять я имею виду функцию extend. Я пользуюсь стилусом, там она выглядит как @extend [selector]. Потом в каком то модуле используется так:

.nav{
    @extend .l-space;
    ...
}

В результирующем CSS получаем такую колбасу:

.l-space,.l-header,p,blockquote,figure,h2,h3,.nav,.folio-item-content,.archive-item header,.thumb--folio,.resources,.resources-item{margin-bottom:20px}
.l-mspace{margin-bottom:30px}
.l-xspace,.l-article,h1,.logo{margin-bottom:40px}
.l-xlspace{margin-bottom:60px}

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

<i class="icon icon--mail l-soffs">
<i class="icon icon--twitter l-soffs">
.l-soffs{ 
    margin-left: $base-whitespace*0.25; 
    margin-right: $base-whitespace*0.25;
}

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

comments powered by Disqus