Jan. 21st, 2013

ermouth: (ang)

Вот когда что-то 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”> и получаем нужный отступ сверху и справа.

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

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

Profile

ermouth: (Default)
ermouth

November 2021

S M T W T F S
 123456
78910111213
14151617181920
21 222324252627
282930    

Most Popular Tags

Style Credit

Expand Cut Tags

No cut tags
Page generated Jul. 25th, 2025 01:53 am
Powered by Dreamwidth Studios