Автоматизатор

Перевод с английского: 10 Best CSS Practices to Improve Your Code (Written exclusively for WDD by Jeff Couturier)

Это очень легко - обнаружить себя, разбирающимся в своем же CSS, который превратился в беспорядочную кашу. Иногда это результат небрежного кодирования с самого начала, иногда это из-за многочисленных "хаков" и изменений. Независимо от причины, не должно быть именно так. Написание чистого, сверхуправляемого CSS просто, если начать с той ноги, и это сделает ваш код легче для поддержки и правки позже. Здесь 11 советов для ускорения процесса написания CSS, которая станет тоньше, быстрее и будет реже причинять вам головную боль.

Оставайся организованным

Также как и в других случаях, оставаться организованным - окупается. Вместо случайного набрасывания ID и классов в том порядке, в котором они приходят на ум, используйте последовательную структуру. Это поможет держать каскадную часть CSS в голове и воздвигать свою таблицу стилей с преимуществом наследования стилей.

Объявляй свои наиболее общие вещи первыми, затем не-такие-общие и так далее. Это позволит твоему CSS правильно наследовать свойства и даст возможность легко переопределять конкретный стиль, когда тебе нужно. Из-за легкой читаемости и логичной структуры ты будешь править такой CSS намного быстрее. Используй ту структуру, которая лучше всего подходит для тебя, держа в уме будущие правки и других разработчиков.

• Сбросы и переопределения
• Ссылки и шрифты
• Основной макет (layout)
• Вторичные макетные структуры
• Элементы форм
• Разное

/* === Сбросы и переопределения === */
* {
  margin:           0;
  padding:          0;
}
 
img { border:       none; }
 
/* === Ссылки и шрифты === */
body {
  font-family:      "Lucida Sans", Verdana, sans-serif;
  font-size:        100%;
}
 
a:link, a:active, a:visited { text-decoration: none; }
a:hover { color: #999; text-decoration: underline; }
 
h1          { }
h1 a        { }
h1 a:hover  { }
 
h2          { }
h2 a        { }
h2 a:hover  { }
 
/* === Основной макет (layout) === */
#page               { }
#header             { }
.sidebar            { }
#alpha-sidebar       { }
#beta-sidebar        { }
#gamma-sidebar       { }
#content            { }
#footer             { }
 
/* === Вторичные макетные структуры === */
#callout-alpha      { }
#callout-beta       { }
.block              { }
 
/* === Элементы форм === */
label               { }
input               { }
input.button        { }
 
/* ===  Разное === */
.w50        { width:        50%;   }
.left       { float:        left;  }
.right      { float:        right; }
.clear      { clear:        both;  }
.hidden     { display:      none;  }

Название, дата и подпись

Пусть другие знают, кто написал твой CSS, когда он был написан и к кому обращаться, если у них есть вопросы по нему. Это особенно полезно при дизайне шаблонов или тем.

/**
 * @author Andrey Zakharov
 * developed for vaultsoft.ru 
 * April - May 2010
 * swatch colors:
 * bg:
 *   #664117 - brown
 *   #d2a668 - light brown
 *   #FCFAF4 - light light pink
 * fg:
 *   #111 - almost black
 *   #dcb073 / #fdc417 - light brown / yellow
 *   #504B35 - wet asphalt
 */

Погоди минуту... что это за мелочь об образце цвета? За многие годы я нашел, что добавление простого списка общих цветов, используемых в моих таблицах стилей, крайне полезно в ходе начальной разработки и при последующих правках.
Это спасет тебя от необходимости запуска Photoshop для замера цвета из твоего дизайна или от просмотра цветов в руководстве по стилю сайта (если он имеет таковой). Когда тебе нужен HTML код для конкретного синего, просто прокрути вверх и скопируй его.

Содержи библиотеку шаблонов

И когда ты устроился на используемой структуре поудобнее, самое время вырезать все лишнее, что не слишком общее и сохранить файл как CSS шаблон для последующего использования. Конечно, можно сохранить несколько вариантов для разных целей: двухколоночный макет, для печати, для мобильников и т.д. Coda (редактор для OSX) умеет классную функцию Clips, которая позволяет делать это легко. Много других редакторов имеют схожие функции, но сойдет даже простейший пакет текстовых файлов.

Это безумие - переписывать каждую твою таблицу стилей с нуля, особенно, когда ты используешь те же самые правила и методологии в каждом из них.

Используй полезные именования

Выше, где объявлялись несколько идентификаторов колонок, они были названы alpha-sidebar и beta-sidebar. Почему же просто не назвать их left-sidebar и right-sidebar? Думай о будущих правках всегда. Через год тебе нужно будет доработать свой сайт и передвинуть эту левую колонку вправо. Ты не должен переименовывать элемент в своем HTML и переименовывать ID в своей таблице стилей, просто чтобы сменить позицию элемента.

Конечно, можно просто поместить ту левую колонку вправо и оставить ид-р #left-sidebar, но не сбивает ли это с толку? Если идентификатор говорит left, кто-то может ожидать, что колонка будет слева. Позднее это не оставит тебе достаточно места, чтобы двигать штуки.

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

Исключай позицию или специфичные слова из своих стилей и идентификторов. Класс .link-blue либо потребует больше работы от тебя, либо сделает твои стили действительно путанными, когда твой клиент попросит тебя поменять эти голубые ссылки на оранжевые.

Обзывай свои элементы основываясь на том, чем они являются, а не на том, как они выглядят. Например, .comment-blue менее гибкое имя, чем .comment-beta, а .post-largefont более ограниченное,чем .post-title.

Дефисы вместо подчеркиваний

Старые бродилки любят давать сбои на подчеркиваниях в CSS или не поддерживают их вообще.Для лучшей обратной совместимости возьми в привычку использовать дефисы взамен. Пиши #col-alpha вместо #col_alpha.

Не повторяйся

Используй повторно аттрибуты всякий раз, когда это возможно, группируя элементы, вместо объявления стилей опять. Если твои h1 и h2 элементы оба используют одни и те же размер шрифта, цвет и отбивку, сгруппируй их, используя запятую.

Это:

h1, h2 {
    margin:   1em 0 2em 0;
    font-size:    1em;
    color:        #222;
}

гораздо продуктивнее, чем

h1 {
    margin:   1em 0 2em 0;
    font-size:    1em;
    color:        #222;
}
h2 {
    margin:   1em 0 2em 0;
    font-size:    1em;
    color:        #222;
}

От переводчика: Если же все-таки h1 и h2 чем-то разнятся, ничего не мешает переопределить отличие ниже:

h1, h2 {
    margin:   1em 0 2em 0;
    font-size:    1em;
    color:        #222;
}
h2 {
    color: #888;
    font-style: italic;
}

Нужно использовать сокращенные формы записи всякий раз, когда это возможно. Всегда будь в поиске возможностей групировать элементы и использовать сокращения объявлений. Можно добиться всего этого:

h1 {
    margin-top:   1em;
    margin-bottom:    2em;
    margin-left:  0;
    margin-right:     0;
}

написав лишь:

h1 {
    margin: 1em 0 2em 0;
}

Очень важно, чтобы ты понял порядок, в котором CSS интерпретирует эти сокращения: top, right, bottom, left. Большой круг по часовой стрелке, начинающийся в полдень. Также, если свойства сверху и снизу, или слева и справа совпадают, ты можешь использовать только два:

h1 {
    margin: 1em 0;
}

От переводчика: Проще говоря, для недостающих свойств значения будут браться циклически с первого. Так, margin: 1em 0; будет считатся как margin: 1em 0 1em 0; а margin: 1em 0 2em; как margin: 1em 0 2em 1em;
Это установит отбивку сверху и снизу в 1em, а справа и слева в 0.

Оптимизируй для легковесных таблиц стилей

Используя советы выше, ты можешь, действительно, сократить размер своих таблиц стилей. Меньше - скачивается быстрее, легче в поддержке и обновлении.
Вырежи все, что тебе не нужно и объедини все, что возможно, группировкой. Так же используй осторожность, используя закостенелые фреймворки. Скорее всего, останется куча ненужного хлама.

Другая подсказка для стройного CSS: не нужно указывать единицы измерения нуля. Если отбивка установлена в 0, не нужно говорить 0px или 0em. Ноль - это ноль, не смотря на единицы измерения, и CSS понимает это.

Пиши для Gecko, потом настраивай для Webkit и IE

Сохрани себя от головной боли устранения проблем и пиши CSS сначала для Gecko бродилок (Firefox, Mozilla, Netscape, Flock, Camino). Если CSS работает верно в Gecko, с большой вероятностью все будет без проблем в Webkit (Safari, Chrome) и Internet Explorer.

Проверяй

Используйте свободный CSS валидатор от W3C. Если ты застрял, и твой макет не делает того, чего бы ты хотел, CSS валидатор очень поможет в отлове ошибок.

Держите дом в чистоте

Отделяй бродилкозависимые CSS в их собственные таблицы стилей и включай их по мере необходимости кодом на серверной стороне, с помощью Javascript или условными комментариями. Используй этот метод для избежания грязных CSS хаков в своих главных таблицах стилей. Это будет сохранять твои базовые CSS чистыми и управляемыми.