CSS: советы и приёмы, часть 1 (Продолжение)
Несколько имён классов
Ты можешь присвоить несколько имён классов к одному элементу. Это позволяет тебе писать несколько правил, которые определяют разные свойства, и применять их только по необходимости. Давай предположим, что ты пишешь код галереи картинок, которая содержит авторские и не авторские картинки. Ещё может быть специальное предложение для некоторых картинок. Код для трёх картинок следующий:
<img src="foo.gif" class="special" alt="" />
<img src="bar.gif" class="royaltyfree" alt="" />
<img src="baz.gif" class="royaltyfree special" alt="" />
Чтобы авторские картинки отличались от остальных, ты можешь создать правило для элементов, класс которого будет называться royaltyfree, и если ты хочешь, чтобы картинки со специальным предложением немного выделялись, то ты можешь создать класс special.
Далее CSS может выглядеть на подобии этого:
.royaltyfree { border:2px solid #666; }
.special {
padding:2px;
background:#ff0;
}
Любая картинка с классом special будет иметь вокруг себя пространство в 2 пикселя и задний фон жёлтого цвета. Картинки с классом royaltyfree будут иметь кромку в 2 пикселя, а картинки с обоими классами будут иметь кромку, пространство и жёлтый фон.
Можно на этом не останавливаться – это только пример. И постарайся использовать семантически правильные имена классов, которые описывают то, что делает элемент, а не то, как он выглядит.
Используй селекторы потомков
Не использовать селекторы потомков – это один из самых распространенных примеров неэффективного использования CSS, который я вижу от новичков. Селекторы потомков могут помочь тебе обойтись без многих атрибутов класса, и сделать твои CSS-селекторы более эффективными. Для примера можно взять следующую структуру кода: <div id="subnav">
<ul>
<li class="subnavitem"><a href="#" class="subnavitem">Item 1</a></li>
<li class="subnavitemselected"><a href="#" class="subnavitemselected">Item 1</a></li>
<li class="subnavitem"><a href="#" class="subnavitem">Item 1</a></li>
</ul>
</div>
Этот код может сопровождаться следующим CSS:
div#subnav ul { /* Обозначения стиля */ }
div#subnav ul li.subnavitem { /* Обозначения стиля */ }
div#subnav ul li.subnavitem a.subnavitem { /* Обозначения стиля */ }
div#subnav ul li.subnavitemselected { /* Обозначения стиля */ }
div#subnav ul li.subnavitemselected a.subnavitemselected { /* Обозначения стиля */ }
Ты можешь заменить вышеприведённые примеры следующим кодом:
<ul id="subnav">
<li><a href="#">Item 1</li>
<li class="sel"><a href="#">Item 1</a></li>
<i><a href="#">Item 1</a></li>
<ul>
и этим CSS:
#subnav { /* Обозначения стиля */ }
#subnav li { /* Обозначения стиля */ }
#subnav a { /* Обозначения стиля */ }
#subnav .sel { /* Обозначения стиля */ }
#subnav .sel a { /* Обозначения стиля */ }
Твой код должен быть как можно чище. Это позволит сделать код страницы и CSS более эффективным и удобочитаемым.
Избегай кавычек в ссылках
Чтобы сэкономить парочку байтов здесь и там, я не заключаю ссылки для картинок заднего фона в кавычки. Кавычки не обязательны. Есть сведения о том, что в некоторых браузерах (в большинстве случаев Internet Explorer на Макинтоше) появляются проблемы, когда ссылки заключены в кавычки.
Продолжение следует
Я забыл написать о твоём любимом совете по CSS? Расслабься, продолжение следует - - - - -
Данная статья разрешена для публикации только на http://visavi.net/