CSS для быстрой разработки

[ermouth]

Вот когда что-то html-ное быстро разрабатываешь, хочется тюнить внешний вид “не отходя от кассы” – то-есть писать в атрибут class сразу те css-правила, что отформатируют элемент как надо.

Классический подход в этом случае – сформулировать базовую библиотеку css и по мере разработки дописывать в неё правила. То-есть html в одном месте, а css – в другом. Это приводит, например, к тому, что нередко один и тот-же набор свойств фигурирует в css-файлах под несколькими разными именами.

Ну и управлять в сложных проектах этим месивом становится геморройно.

С год примерно назад я проанализировал типовые сценарии, когда уже написанных css-правил не хватает и надо городить новые. И выяснил, что почти всегда, когда рисуется новое правило, надо просто немного подправить стандартный внешний вид элемента. Например, в заголовке отступить сверху 15px, а не 10 как везде.

То-есть это нарисовал верстальщик код по картинке, и начинает или миллион стилей городить или style=”bla-bla-bla” дописывать в каждый второй элемент, чтобы верстка соответствовала макету.

Можно проще.

У нас в последний проектах используется css-файл, в котором помимо обычных правил для элементов определены ещё такие примерно селекторы:

mt0 {margin-top:0!important}
mt5 {margin-top:5px!important} …
mb0 {margin-bottom:0!important}…

И такие мнемоники забацаны для margin, padding, border, width, height, opacity, font-size, line-height, text-align, float и тд. Для параметров, поддерживающих числовой аргумент, определены все стили в разумной сетке. Для margin-top это от –5 до 10px через пиксель, от 10 до 50 – через 5 пикселей, потом через 10, потом через 50, ну и так до 1000+ пикселей макс ширины.

Это не так много получается – 10 Кб css, который к тому же отлично жмётся при передаче с сервера. http://dvina-service.ru/general.css – см в конце файла.

То-есть надо нам в верстке подправить отступ например – просто пишем <div class=”mt10 mr5”> и получаем нужный отступ сверху и справа.

Сначала кажется дичью, но вообще это исключительно удобно.

Как бы вы назвали такой подход, френды?

Comments

[korvine.livejournal.com]

Сталкивался с таким подходом, даже вел проект некоторое время используя такую методику. В конце-концов отказался. В сущности между этим подходом и прямой записью, хардкодом, прямо в HTML div'a стиля style="margin:5px;" разницы нет - фактически это тот же хардкод. В смысле, что вы же не сможете в CSS переопределить значение класса mt5 - он всегда должен быть равен пяти. Поэтому любое изменение сопряжено с копанием в PHP / Pytone и т.д. Особенно если там нет своего специфического класса - а как правило его нет, иначе зачем все эти mt5 писать, так можно же прямо в CSS правило добавить.

Ну а проблемы хардкода CSS'a прямо в HTML описаны уже неоднократно, собственно повторятся нет нужды. Не сказал бы, что это прям, совсем говнокод, но определенных проблем с таким кодом можно словить на ровном месте. Хотя, конечно, и разработку ускоряет будь здоров, когда не нужно на каждый абзац свой класс придумывать, чтоб отступ там прописать. Так что с интересом подожду комментариев, если что.

PS: ну не могу просто удержатся, все ненавидят буквоедов, простите - но вот это не будет работать так, как вы ожидаете — .mt5 {margin-top:5!important} :)

[ermouth.livejournal.com]

поправил, спс

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

Я не претендую на то, что это универсальный рецепт, это просто одна из техник.