Организация — это не все, но без организации, все — ничто,
говорил один из моих учителей, и он прав. Почти все выигрывают от организации, как и работа с CSS, особенно при работе со многими людьми. В течение многих лет я особенно заботился об организационных стандартах в основном для HTML и CSS (немецкие читатели могли бы знать руководящие принципы кодирования, которые я создал для GMX и Aperto ), и должно быть достаточно «доказательств концепции».
Тем не менее, время внесло дополнительные уточнения в мои персональные рекомендации по кодированию CSS , и я хочу поделиться тремя основными правилами, которые я использую для последовательной организации и повышения эффективности (кстати, именно об этом я и упоминал, когда анонсировал CS4 в январе). Я надеюсь, что они означают некоторое вдохновение, пожалуйста, не стесняйтесь использовать, играть и комментировать их.
Сортировка и группировка по селекторам
Веб-разработчики, использующие «модульный подход», как правило, уже делают это, но стоит стандартизировать порядок выбора , как для себя, так и для вовлеченной команды. В настоящее время порядок, который я определил для селекторов в моих проектах, таков (хотя он не включает все типы селекторов):
*, html, body, h1, h2, h3, h4, h5, h6, p, address, blockquote, pre, ul, ol, li, dl,
dt, dd, table, caption, tr, th, td, form, fieldset, legend, label, input, textarea,
div, img, a, strong, em, abbr, q, cite, code, kbd, var, span, #id, .class
Этот метод сортировки работает как «вертикально», так и «горизонтально»:
ul, li, .note {}
ul {}
li {}
.note {}
Правило станет немного сложнее, если говорить о потомках селекторов; Я использую, чтобы применить тот же порядок ( например p em, p abbr {} , например ), но пусть сначала идут более простые селекторы (подумайте p, p em, p abbr {}). Еще одно «вспомогательное правило», которое стоит упомянуть, — это, конечно, порядок, применяемый к селекторам, например, например, pи p.warning, где это будет p, p.warning(или p, .warning, опять же, подгонка вышеупомянутой схемы), как по вертикали, так и по горизонтали.
По общему признанию, это получает грубое описание того, что я использую и с чем у меня был хороший опыт. Не стесняйтесь опираться на это; например, вы можете пойти по «модульно-ориентированному» пути, применив этот порядок только в сегментах CSS (например, стили навигации и т. д.) или сделать его более конкретным.
Используйте любую декларацию только один раз
Точно: Используйте любое объявление только один раз . Причина этого заключается в том, что в среднем объявления длиннее и, следовательно, увеличивают вес таблиц стилей, чем селекторы (и группы селекторов), и, следовательно, занимают больше времени для загрузки . Другая причина в том, что это хороший аргумент, чтобы встряхивать головы, когда появляются CSS- переменные (а не переменные-селекторы ) — во многих случаях они, вероятно, вообще не нужны.
Давайте посмотрим реалистичный, хотя и сокращенный пример (просто представьте, что эта таблица стилей содержит, скажем, 50 правил):
h1, h2, h3 { font-weight: normal; }
a strong { font-weight: normal !important; } /* exemplary, take it as given */
strong { font-style: italic; font-weight: normal; }
#nav { font-style: italic; }
.note { font-style: italic; }
Применение правила «любая декларация только один раз» приводит к:
h1, h2, h3, strong { font-weight: normal; }
a strong { font-weight: normal !important; }
strong, #nav, .note { font-style: italic; }
Это уже экономит несколько символов (и время загрузки), не мешая при этом: в конце концов, стилизация HTML- документов — это представление, поэтому сначала нужно хорошо сосредоточиться на объявлениях.
Однако следует отметить четыре важных момента:
- Слишком длинные селекторы могут сделать этот метод бесполезным. Повторение селекторов, например,
html body table tbody tr td p span.extraordinary-awesomish-class-nameдля того, чтобы иметь уникальные объявления, не сильно экономит, но это может быть признаком использования более компактных селекторов. - Помните о правилах CSS : когда пользовательский агент не может проанализировать селектор, он также должен игнорировать блок объявления . Если у вас возникнут проблемы с этим, просто измените правило соответствующим образом (дважды используйте декларацию).
- Помните каскад при использовании этого правила в сочетании с первым.
- Это правило организации и эффективности требует большего внимания при ведении таблиц стилей. Найдите способ отслеживать измененные и добавленные объявления, чтобы снова привести их в соответствие — это несложно при использовании более или менее разумного редактора (например, показывающего изменения строк), но в любом случае его необходимо включить в рабочий процесс.
Сортировка по алфавиту
Я не знаю, сколько идей, как сортировать объявления внутри блоков объявлений, но самая простая и «наименее требовательная» — это сортировка по алфавиту . Таким образом, вместо того, чтобы сначала думать об измерениях, затем о цветах, размерах и т. Д., Просто упорядочите их в алфавитном порядке:
#content {
border: 1px dashed;
color: #000;
margin: auto;
padding: 1em 0;
width: 700px;
}
Я знаю, что у других методов сортировки (или их вообще нет) тоже есть друзья, но можно утверждать, что это действительно просто и понятно, как только вы к этому привыкнете — что происходит быстро.
пример
Для того , чтобы показать все эти советы в действии вместе (а также несогласованность от моего имени 
), вот часть WHWS «s 2006 стандарта стилей:
@media screen, projection {
* { margin: 0; padding: 0; }
html { background: #000; color: #ccc; font: 87.5%/1.5 optima, arial, sans-serif; text-align: center; }
body { margin: 1em 0; }
h1, h2 { font-size: 1em; font-weight: normal; }
h1 { background: url(/media/logo.jpg) no-repeat; height: 366px; text-indent: -999em; width: 620px; }
h2, p { margin: 0 .5em; }
p + p { text-indent: 1em; }
p#ref { background: url(/media/end.jpg) no-repeat bottom center; margin: 1.5em 0 0; padding-bottom: 179px; }
ul { margin: .5em 0 .5em 1.5em; }
ul#lang { list-style: none; margin: .5em 0 1em 1.5em; }
ul#lang li { display: inline; }
div#show { margin: auto; text-align: left; width: 619px; }
div#whws { background: url(/media/tape.gif) repeat-y top center; margin: 42px 0; }
div#whws + div { position: relative; }
a, strong { color: #fff; }
strong { font-size: 1.3em; line-height: 1.0; }
kbd { font-family: optima, arial, sans-serif; }
}
В конце концов, просто используйте то, что лучше для вас , и пусть эти правила вдохновят вас на то, чтобы попробовать их в некоторых проектах для домашних животных или вышеупомянутым способом для конкретного модуля. Что, на самом деле, хороший подход в довольно сложных проектах.
Последний совет: CS4 лучше всего подавать с TWBHT .