CSS для быстрой разработки
Jan. 21st, 2013 10:32 pmВот когда что-то 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”> и получаем нужный отступ сверху и справа.
Сначала кажется дичью, но вообще это исключительно удобно.
Как бы вы назвали такой подход, френды?