< The Webmakers Lounge />

На днях журнал Smashing Magazine опубликовал статью “70 Expert Ideas For Better CSS Coding“. В статье рассматриваются вопросы организации и структуры кода CSS и возможности его оптимизации.

Давайте попробуем разобраться насколько эти советы являются экспертными и на сколько реально их использовать в повседневной работе.

Я буду приводить примеры из оригинальной статьи и комментировать их по своему усмотрению.

Начнем:

* “Include your headers, your navigation, a sample of the content, and your footer. Then start adding your html markup. Then start adding your CSS. It works out much better.”

Не уверен что что нужно написать HTML фактически для всей страницы, а уж только потом начинать писать стили. Спорно. Думаю стоит все делать постепенно. Общий контейнер, навигация, блок контента, короче один за другим. Вот мой выбор.

* Reset your CSS styles first.

Полностью согласен. Об этом я писал в предыдущей заметке “Обнуляем дефолтные значения для HTML-элементов“.

Use a Master Stylesheet.

 master.css
@import url("reset.css");
@import url("global.css");
@import url("flash.css");
@import url("structure.css");

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

* Keep a library of helpfull CSS classes.

 .width100 { width: 100%; }
.width75 { width: 75%; }
.width50 { width: 50%; }
.floatLeft { float: left; }
.floatRight { float: right; }
.alignLeft { text-align: left; }
.alignRight { text-align: right; }

Этот совет вобще никак не вяжется с моим представлением о CSS кодинге. Гораздо логичней прописывать свойства элементам по их идентификаторам, а не множить классы. Конечно стОит описывать общие свойства для многих элементов один раз, а не каждый раз, это можно сделать через перечисление нужных элементов, но не “прикручивать” к ним всем еще один класс.

#main, #header, #content{
width: 80%;
}

* Organize your stylesheets using flags.

/* ---------->>> GLOBAL < <<-----------*/

Согласен, логично разделять стили на структурные блоки, разделяя их комментариями. Единственное что хотелось бы добавить, что не стоит злоупотреблять комментариями в коде, так как они добавляют к “весу” документа.

* Organize your CSS-styles, ordering properties alphabetically.

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

Что касаемо общей структуры, то тут я думаю тоже не стоит заморачиваться. HTML код пишется построчно и так же выполняется. Естественно вместе со вложенностью. Почему в CSS должно быть по-другому?

* Keep containers to a minimum. Keep properties to a minimum. Keep selectors to a minimum. Keep CSS hacks to a minimum.

Минимализм в коде это хорошо. Не стоит засорять код лишними элементами, не надо множить блоки и классы, каждый символ - это лишние байты в вес документа и нечитаемость на выходе. Главное не забывать про меру - идентификаторы логично называть осмысленно, чтобы было ясно их предназначение.

Кстати о наименовании:

* Use a common naming system. Name your classes and IDs properly, according to their semantics.

Логично. Придерживайтесь выбраного вами стиля наименования. Во вложенных элементах логично использовать структуру вида родительский_дочерний.

* Use shorthand notation. Используте сокращенное описание. Как говорится “+1″.

Margin:

margin: top right bottom left;
margin:1em 0 2em 0.5em;
(margin-top: 1em; margin-right: 0; margin-bottom: 2em; margin-left: 0.5em;)

Border:

border:width style color;
border:1px solid #000;

Background:

background: color image repeat attachment position;
background:#f00 url(background.gif) no-repeat fixed 0 0;

Font:

font: font-style (italic/normal) font-variant (small-caps) font-weight font-size/line-height font-family;
font: italic small-caps bold 1em/140% "Lucida Grande",sans-serif;

* Debugging - это наше все. Фактически каждый день использую конструкцию border: 1px solid red; Очень удобно, когда надо посмотреть на границы элемента и его расположение относительно других.

* Element names in selectors are case sensitive.

Рекомендуется все тэги, классы и идентификаторы описывать в нижнем регистре (строчными буквами) дабы избежать недоразумений. Да, и начинаться они должны с буквы, а не с цифр или спецсимволов.

Работа с ссылками.

* Be careful when styling links if you’re using anchors. If you use a classic anchor in your code (< а name="anchor">) you’ll notice it picks up :hover and :active pseudo-classes. To avoid this, you’ll need to either use id for anchors instead. Если документ правильно сверстан, то смысла использовать структуру name=”anchor” нет. Всегда можно ссылаться на id любого элемента на странице - hrеf=”#content”

Желательно давать посетителю понять что ссылка ведет на другой сайт, if any. Есть несколько способов сделать это. Можно не мудрствуя лукаво указывать класс, например “out” или “ext”, можно автоматизировать.

* You can set hr to separate posts beautifully. “Restyling the horizontal rule (hr) with an image can be a beautiful addition to a web page.

Чудесно. Если не учитывать то что hr является нежелательным элементом в HTML 4.01 и вобще не будет работать в XHTML 1 Strict. Речь на самом деле шла о том что presentation attributes являются нежелательными для hr. Будем считать что я его недолюбливаю
Ну ладно, заметка и так получилась длинной и немного сумбурной. В принципе сама статья-оригинал не плоха, начинающим будет полезна. Даже наверное не сама статья, а ссылки на источники. Но экспертной ее назвать язык не поворачивается. Самое главное это подходить к утверждениям с долей критики и думать, думать, думать. А уже потом делать.

Эта запись опубликована в Воскресенье, 13/05/2007 , 12:59 пп и размещена в рубрике CSS. Вы можете следить за обсуждением этой записи с помощью ленты RSS 2.0. Вы можете перейти в конец и оставить комментарий. Уведомления сейчас отключены.