Оптимизируем стили! Css сокращения.

     В одном из предыдущих постов я опубликовал свой доморощенный компрессор стилевых файлов. Работает он просто - убирает из файлов всё лишнее. Так вот к чему это я..
     Я задумался, а почему бы сразу не писать стили правильно, экономя байты в файле? Я сам во время работы, по возможности сокращаю написание стилей, и сейчас опишу методы и нюансы, которые позволяют мне это делать. Пишу я о стилях в css2 - css3 даже не касаюсь ибо рано ещё.

1. Точка с запятой в конце блока

     Самое простое сокращение, которому нужно обучить себя в первую очередь - это удаление точки с запятой в конце каждого блока стилей. Блок - это набор параметров конкретного класса или идентификатора, окруженный фигурными скобками. Вот пример:     "Это ведь такая мелочь!", скажите вы. А вот и нет! Если в нашем файле порядка 6 - 7 сотен строк по блоку в каждой, то мы сэкономим 600 байт - а это уже достаточно много.

2. Цвета в css и их написание

     Цвета в css2 можно писать четырьмя способами: в стандартном RGB формате, шестнадцатеричным (HEX) кодом, сокращенным HEX кодом и просто названием цвета (для основных цветов). Вот примеры записи черного цвета в разных форматах:     Как легко можно понять из вышеприведенного примера, самый компактный формат - HEX. Но и тут есть пара нюансов. Цвета в HEX формате записыавются в виде сочетания решетки (#) и 6 или трех символов. Сократить написание можно если символы цвета подряд попарно равны, например #000000 = #000 , #FF0077 = #F07 и так далее. Что косается имен цветов, то они либо равны 4 символам, тоесть по весу в байтах равны сокращенной HEX записи, либо длиннее. Но есть одно исключение - красный цвет: его имя - red, а скоращенная HEX форма - #F00, так что чистый красный цвет всегда нужно записывать именем.

3. Padding и Margin

     Отсупы в css тоже можно записывать в краткой форме. Причем даже у краткой формы есть краткая форма - каламбур, но факт. Посмотрите следующий листинг:     В скоращенной форме значения записываются по такой схеме: margin: верх право низ лево; - это надо запомнить. И с padding то же самое. Видите как много можно сэкономить места ,правильно записав отступы!

4. Краткая запись font, background, border

     На шрифте тоже можно отыграться. Сравните:     Остальные стили, перечисленные в названии данного пункта сокращаются так же, за исключением того, что при описании границ всё равно придется отдельно указывать верхнюю, нижнюю, правую и левую грани.

     Про все основные сокращения я, как мне кажется, написал. Если вам понравилась эта статья.. посещайте мой блог почаще)).