Используйте каскады! Об использовании CSS с умом.

Множество раз я видел людей, которые забывали что означает первая "C" в аббревиатуре "CSS". И как следствие, постоянное неправильное использование технологии, увеличивало их работу.

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

Использование каскада

Проще всего будет проиллюстрировать использование на примерах:

Разметка:

<div id="footer"> <h4>Друзья</h4> <ul class="footer-links"> <li><a href="http://friendone.com/">Лучший друг</a></li> <li><a href="http://friendtwo.com/">Ещё один лучший друг</a></li> <li><a href="http://friendthree.com/">На самом деле просто знакомый</a></li> <li><a href="http://friendfour.com/">Подруга знакомого</a></li> </ul> <h4>Контакты</h4> <ul class="footer-links"> <li><a href="http://contactone.com/">Сайт друга</a></li> <li><a href="http://contacttwo.com/">Сайт другого друга</a></li> <li><a href="http://contactthree.com/">Сайт знакомого</a></li> <li><a href="http://contactfour.com/">Сайт подруги знакомого</a></li> </ul> </div>

CSS:

#footer{ width : 100%; clear : both; … } .footer-links{ width : 48%; float : left; … }

Несколько списков в футере, указывают на различные сайты. Каждому элементу ul присвоен класс class = "Footer-links". Это все конечно хорошо, и работает без проблем, но гораздо лучше было бы так:

Разметка:

<div id="footer"> <h4>Friends</h4> <ul> <li><a href="http://friendone.com/">Friend One</a></li> <li><a href="http://friendtwo.com/">Friend Two</a></li> <li><a href="http://friendtrhee.com/">Friend Three</a></li> <li><a href="http://friendfour.com/">Friend Four</a></li> </ul> <h4>Resources</h4> <ul> <li><a href="http://resourceone.com/">Resource One</a></li> <li><a href="http://resourcetwo.com/">Resource Two</a></li> <li><a href="http://resourcetrhee.com/">Resource Three</a></li> <li><a href="http://resourcefour.com/">Resource Four</a></li> </ul> </div>

CSS:

#footer{ width : 100%; clear : both; … } #footer ul{ width : 48%; float : left; … }

То есть лучше использовать родительский элемент для задания первоначального стиля, а затем по каскаду, доопределять стили для дочерних элементов в соответствии с ним. Другой хороший пример:

Разметка:

<div id="header"> <h1 id="logo">CSS Tricks</h1> </div>

CSS:

#header{ width:100%; } #logo{ … [styles] … }

Поскольку элемент h1 встречается только один раз в заголовке, то лучше было бы написать так:

Разметка:

<div id="header"> <h1>CSS Tricks</h1> </div>

CSS:

#header{ width:100%; } #header h1{ … [styles] … }

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

Идём дальше

Другой отличный приём программирования - это определить один "главный" класс, как основу для других, более конкретных стилей. Например:

.left{ float:left; } .image-left{ float:left; margin:0 10px 10px 0; } .blockquote-left{ float:left; width:280px; margin:0 10px 0 -30px; }

Эти стили могли бы быть определены так:

.left{ float:left; } img.left{ margin:0 10px 10px 0; } blockquote.left{ width:280px; margin:0 10px 0 -30px; }

Как видите, этот приём уменьшает количество классов (с 3 до 1), а также количество строк кода (с 12 до 10). Конечно, это не сама цель, однако вам надо будет запоминать меньше классов для использования в разметке, и в реальных задачах разница будет заметна.

Заключение

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