Используйте каскады! Об использовании 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). Конечно, это не сама цель, однако вам надо будет запоминать меньше классов для использования в разметке, и в реальных задачах разница будет заметна.

Заключение

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

Опубликовано: 17.11.2009 Просмотров 24723 Ссылка на оригинал Tweet it!
6 comments  

anonymous

2009.11.17 11:04

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

с 3 до 1 и с 12 ДО 10
 

basilkot

2009.11.17 23:50

  • Спасибо, исправил.

Gavilan

2010.03.25 18:35

 Спасибо, наглядно показано!
 

Du33

2010.04.20 16:14

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

Kvisaz.ru

2010.08.04 07:24

 к сожалению, когда вёрстка очень сложная, лучше НЕ использовать каскады. Проблема в том, что браузеры обрабатывают каскадные селекторы справа налево.

То есть при обработке правила #foo p браузер сначала найдёт все p на странице, а потом уже вычленит из них те, что содержатся в блоке #foo

когда таких каскадов много и когда самый правый элемент встречается часто - страница обрабатывается медленнее
 

Kvisaz.ru

2010.08.04 07:25

 Вот тут об этом с примерами и таймером - http://webo.in/articles/all/2009/19-simplifying-css-selectors/
 

css

2014.07.11 06:48

 Статья устарела, не стоит особо брать ее на вооружение, каскады нужно использовать редко и обдуманно.
 

Оставить после себя комментарий

user

2016.11.23

Отправить сообщение:

Email

Сообщение

Бонус на первый депозит в слоте Грейт Пигсби Мегавейс дарит тебе онлайн казино Вавада! Переходи по ссылке и получай 100 бесплатных вращений на депозит до 1000$!