alexilin

1) Этот совет скорее всего самый полезный, поскольку он может быть применен к обоим методам организации CSS, которые буду описаны ниже.

#main_side {
    width: 392px;
    padding: 0;
    float: right; }
 
    #main_side #featured_articles {
        background: #fff; }
 
    #main_side #frontpageads {
        background: #fff;
        margin: 8px 0; }

Такая структура позволяет легче ориентироватся в разметке и видеть как относятся друг к другу блоки на странице.

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

h2 { }
 
    #snapshot_box h2 { 
        padding: 0 0 6px 0;
        font: bold 14px/14px "Verdana", sans-serif}
 
    #main_side h2 { 
        color: #444;
        font: bold 14px/14px "Verdana", sans-serif}
 
    .sidetagselection h2 {
        color: #fff;
        font: bold 14px/14px "Verdana", sans-serif}

2) Используйте сокращенную запись свойств чтобы сэкономить место. Например:

margin:5px 0 4px 10px

более рационально, чем:

margin-top:5px;
margin-right:0;
margin-bottom:4px;
margin-left:10px

Объединение свойств на одной линии используя сокращенную запись делает ваш CSS легким для понимания и редактирования.

#test {
      margin-top: 2px;
      margin-right: 3px;
      margin-bottom: 5px;
      margin-left: 9px;
      font-weight:bold;
      font-size:12px;
      line-height:14px;
      font-family:Arial, Verdana, sans-serif;
      border-width: 1px;
      border-style: solid;
      border-color: #000000;
      background-color:#fff;
      background-image:url(bg.gif);
      background-repeat:no-repeat;
      background-position:0 15px
}

Согласитесь что это не очень удобно редактировать. Но используя несколько сокращенных записей вся эту куча правил может быть уменьшена до 4-х строчек кода:

#test {
      margin: 2px 3px 5px 9px;
      font: bold 12px/14px Arial, Verdana, sans-serif;
      border: 1px solid #000;
      background: #fff url(bg.gif) 0 15px no-repeat;
}

3) Разделите вашу таблицу стилей на характерные области. Кстати с помощью метода специальной метки вы сможете быстрее попасть в нужную вам область. Прежде чем вы разделите свои стили, определите названия областей и вид разделителя, который вам будет проще заметить.

Например такие:

• Общие стили – (body, paragraphs, lists, и т.д.)
• Шапка сайта
• Структура страницы
• Загаловки
• Стили текста
• Навигация
• Формы
• Комментарии
• Дополнительно

И вид разделителя:

/* -----------------------------------*/
/* ---------->>> Общие стили <<<-----------*/
/* -----------------------------------*/

4) Четвертый совет не всегда возможно использовать, но при реализации он приносит неоценимую пользу. Для этого необходимо чтобы основные правила были определены только один раз, и в дальнейшем в таблице не переопределялись. Например если вы знаете что все элементы не должны иметь отступов, определите эти правила в начале. Это позволяет получить быстрый доступ к редактированию элементов, если дизайн ресурса предполагает частые косметические изменения.

5) Пятый совет это своего рода сравнение двух вариантов организации CSS, их плюсов и минусов.

С одной стороны вы можете использовать CSS компрессор и получить удобную таблицу стилей — каждое правило на отдельной линии. Преимущество данного метода в том что вы имеете легкую для восприятия структуру CSS. Недостаток — тяжело редактировать, т.к. появляется горизонтальная прокрутка.

Если использованть распространенный метод табуляции, то это просто поменяет преимущества и недостатки местами.

Наиболее оптимальный способ — вынести основные правила для всех элементов в отдельную секцию в таблице стилей или в отдельный файл. Это позволит вам иметь отдельную таблицу, где сконцентрированы правила для более специфичных элементов.

А какие методы используете вы?

Источник: «5 Tips for Organizing Your CSS»

Если у вас есть два конфликтующих правила CSS относящихся к одному элементу, браузер следует нескольким принципам для определения какое из правил более приоритетное.

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

Если у вас есть два одинаковых селектора, то приоритет будет иметь последний.

p {
color: red
}
p {
color: blue
}

Элемент p будет синего цвета, т.к. это правило последнее.

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

div p {
color: red
}
p {
color: blue
}

Может показатся что элемент p вложенный в div будет синего цвета, т.к. правило p {color: blue} самое последнее, но на самом деле он будет красного цвета из-за специфичности первого селектора. Чем больше специфичен селектор, тем больше у него приоритетность.

Специфичность вложенных селекторов требует некоторых расчетов. Все id селекторы (#something) приравниваются к 100, селекторы класса (.something) равны 10, а каждый HTML элемент равен 1.

• p — имеет специфичность равную 1 (один HTML элемент);
• div p — имеет специфичность равную 2 (два HTML элемента);
• .tree — имеет специфичность равную 10 (один селектор класса);
• div p.tree — имеет специфичность равную 12 (два HTML элемента и один селектор класса);
• #baobab — имеет специфичность равную 100 (один id селектор);
• body #content .alternative p — имеет специфичность равную 112 (два HTML элемента, один id селектор и один селектор класса).

Наибольший приоритет имеют инлайновые стили (атрибут style) и приравниваются к 1000.

Источник: Specificity

Eric Meyer предложил использовать опредленные CSS правила для выявления ошибок на странице в ходе проектирования. Цель правил визуально показывать ошибки на странице. Например если у ссылки не проставлен адрес она выделяется определенным цветом и сразу обращает на себя внимание.

Вот примеры правил для изображений:

img {outline: 5px solid red;}
img[alt][title] {outline-width: 0;}
img[alt] {outline-color: fuchsia;}
img[alt], img[title] {outline-style: double;}
img[alt=""][title], img[alt][title=""] {outline-width: 3px;}
img[alt=""][title=""] {outline-style: dotted}

Выглядит это следующим образом:

1. Устанавливает всем изображениям красный контур шириной 5px.
2. Если у изображения есть атрибуты alt и title, то ширина контура приравнивается к нулю.
3. Если изображениее имеет атрибут alt, контура приобретает цвет fuchsia.
4. Если присутствует атрибут alt или title контур увеличивается вдвое.
5. Если у изображения пустой alt и заполненный title, или наоборот, ширина контура становится равной 3px.
6. Если имеются пустой атрибут alt и пустой title, контур становится пунктирным.

Посмотреть стили в действии можно на демонстрационной странице.
А вот собственно и полная текущая версия:

div:empty, span:empty, li:empty, p:empty, td:empty, th:empty {padding: 0.5em; background: yellow;} ! important
*[style], img, a[href], font, center {outline: 5px solid red;} ! important
table, th {border: 5px solid red;} ! important
 
img[alt][title] {outline-width: 0;} ! important
img[alt] {outline-color: fuchsia;} ! important
img[alt], img[title] {outline-style: double;} ! important
img[alt=""][title], img[alt][title=""] {outline-width: 3px;} ! important
img[alt=""][title=""] {outline-style: dotted;} ! important
 
table[summary], th[scope="col"], th[scope="row"] {border: 1px solid #AAA;} ! important
 
a[title] {outline-width: 0;} ! important
a[title=""] {outline-width: 3px;} ! important
a[href="#"] {background: lime;} ! important
a[href=""] {background: fuchsia;} ! important

Конечно эти стили не заменят различные утилиты типа Web Developer Toolbar. Но они могут пригодится как еще один полезный инструмент в наборе веб-разработчика.