5 полезных CSS советов

Вашему вниманию представлены 5 быстрых советов, которые помогают мне при разработке сайтов.

1. Организуйте Ваш CSS код

Некоторые советуют иметь оглавление в таблице каскадных стилей. Я против такого подхода. У меня все намного проще - я стараюсь писать CSS одинаковым образом каждый раз:

1) вначале идут все важные контейнеры или блоки (слои с ID "header", "footer", "maincontent" и прочее);
2) далее идут заголовки от H1 до H6;
3) далее идут стили ссылок и абзацев;
4) далее все мои списки (навигация и прочее).

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

2. Избегайте стилей по умолчанию

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

a {
color: red;
text-decoration: none;
border-bottom: 1px dotted red; }

или

h2 {
font: bold 18px/1.4em "Lucida Grande", "Verdana", sans-serif;
color: #000;
border-bottom: 1px dotted #ccc;
padding: 0 0 3px 0;
margin: 0; }

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

В таком случае я делаю так:

h2 { }
#maincontent h2 {
padding: 0;
margin: 0;
… }

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

3. Используйте служебные теги

Очень часто в Вашем дизайне будет текстовая секция, которая будет обращаться в CSS файл за разными типографическими свойствами (внешний вид, вес). Причем текст будет или на одной строке, или очень близко друг к другу. Например, у Вас может быть подзаголовок на блоге с другим цветом ссылки и рядом ссылка на комментарии, или заголовок с более мелким подзаголовком сразу снизу. Для таких мелких стилей я не люблю создавать дополнительные слои и классы. Вместо этого я использую так называемые "служебные теги". Вот они:

<small>, <em>, и <strong>

Я использую эти 3 тега все время для оформления маленьких участков дизайна. Вот пример:

<h2>Title Of Entry Here <small>Quick subheading here</small></h2>

Внутри заголовка H2 я вставил тег <small> для изменения внешнего вида. Я хочу, чтоб текст заголовка H2 был на одной линии, а маленький текст на следующей и другим шрифтом. Вот как выглядит мой CSS:

#parentelement h2 {
font: bold 18px "Trebuchet MS", "Tahoma", sans-serif;
color: #f00;
padding: 0 0 3px 0;
border-bottom: 1px dotted #aaa; }
#parentelement h2 small {
display: block;
font: normal 12px "Lucida Grande", "Verdana", sans-serif;
color: #333; }

Я использовал служебный тег внутри заголовка. Для него не потребовался отдельный класс. Что же делает там свойство "display: block;"? Именно это свойство переносит маленький текст на следующую строку.

4. Используйте правильный инструмент для работы

Я не ярый сторонник проверки кода на валидность, но предпочитаю использовать семантические теги вместо обобщенных. Всего существует шесть тегов заголовков (<h1> - <h6>), так что вместо того чтоб называть слой <div class="sectiontitle">, используйте то, что уже есть в Вашем арсенале - теги заголовков - ведь они ж не просто так были придуманы. Я вообще редко пользуюсь обобщенными тегами и стараюсь почти всегда употреблять уже готовые HTML решения.

5. Называйте, основываясь на том, где расположено, а не на том, как выглядит

На сайте PingMag статья рассказывает о том, что лучше создавать классы с именами "red" или "strong" для Ваших слоев для быстрого оформления, но я считаю, что это плохая идея. Лучше их называть "error", "important-message", или любое другое название, которое говорит о том, что именно это есть, вместо того как оно выглядит. Что лучше: назвать штуку вот там пожарной машиной (при этом мы знаем, что она красная), или сказать мне, что там стоит большая красная машина (и Вам бы тогда пришлось спрашивать не пожарная ли это машина). Вот веселый пример:

class="strong red align_right" - неужели Вы серъезно? :)

Ужасное название! Названия должны описывать содержание, а не внешний вид. Это и есть основная цель CSS - разделение внешнего вида и содержимого.

 

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.businesslogs.com
Перевел: Максим Шкурупий
Урок создан: 30 Марта 2009
Просмотров: 29329
Правила перепечатки


5 последних уроков рубрики "CSS"

^ Наверх ^