Стиль программирования CSS

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

Конкретных стилей программирования CSS, как это было с PHP, как ни старался, не нашел. Могу только предполагать, что оформление кода в CSS не настолько сложно и запутанно, а так же не позволяет использовать многоуровневую вложенность, что в общем-то стиль оформления CSS как таковой не нужен. Однако я бы рекомендовал выработать для себя какие-то стандарты и правила, которые в будущем помогут лучше ориентироваться в коде и вносить в него изменения.

Кодировка файла

В своей практике любой CSS файл начинаю с задания кодировки используя конструкцию:

@charset "utf-8";

Окно браузера

Во вторую очередь прописываю общий стиль для окна браузера, у меня он сложился из следующих директив:

html, body {margin:0 auto;height:100%;position:relative;}
body {font:12px Verdana, Geneva, sans-serif;background:#ССС;line-height:110%;}

Сброс отступов

Часто в своей практике встречался с тем, что бывает сложно найти источник какого-нибудь отступа, особенно если стили объявляются не только в файле, но и тегов <style></style> в HTML коде. Для того, чтобы минимизировать подобные случаи я предпочитаю сбросить любые отступы в начале файла:

* {margin:0;padding:0;}

Объявление стилей тегов

После того как мною был задан стиль окна браузера по умолчанию и сброшены отступы, у меня идет блок объявления стилей тегов. Мне удобней их объявить сразу, чем потом искать отдельно в коде, опять таки, стилизацию тегов можно потом легко переопределить с помощью наследования через id и class. Мой код объявления тегов:

a {outline:none;}
img {border:0;}
p {padding:0 0 12px;}

Только после этого мною начинают поочередно объявляться id и class, которые встречаются в коде HTML. Объявлять их стараюсь в той же последовательности, в которой они встречаются в HTML. Это позволяет в последующем быстро находить нужные объявления в файле CSS и быстро их изменять или масштабировать.

Оптимизация CSS кода

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

p {position:relative;padding:0 0 20px;text-align:center;}

Убираю все лишние пробелы внутри фигурных скобок, например объявление position:relative; и position: relative; это одно и тоже объявление, но первое на один символ меньше, а парсеру без разницы, есть пробел после двоеточия или нет.

Сокращение цветов

Не все знаю, что можно сокращать повторяющиеся символы до трех в объявление цвета:

 background:#ССС; против background:#СССССС;

будет один и тот же серый цвет, но первое объявление будет короче.

Универсальные свойства

Не все знаю, что свойства деляться на универсальные и обычные. Универсальные свойства состоят из ряда обычных свойтв, поэтому для оптимизации важно использоваться одно универсальное свойство, а не набор обычных. Например:

font:12px/14px Verdana, Geneva, sans-serif; против font-family:Verdana, Geneva, sans-serif;font-size:12px;line-height:14px;

одно и тоже объявление, но только первое (универсальное) намного короче и лично мне намного проще читаемое.

И еще несколько советов

Что еще можно порекомендовать, это убирать значение величины из параметров с нулевым значением:

top:0px против top:0

или

margin:0px 0px 12px; против margin:0 0 12px;

это одинаковые объвления, однако сразу видно где символов меньше.

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