WebTager

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

Давайте вместе с вами попробуем найти правильный стиль написания CSS.

Чтот это такое, и вообще, зачем это нужно, спросите вы?
Ведь в большинстве случаев на это никто не обращает внимание, а на работу сайта - практически не влияет…

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

Что это включает в себя?

Ниже - список идей, которые мы определим, как признаки хорошего стиля в CSS:

Определение Кода

Маленькая секция в начале вашего CSS файла, где вы указываете некоторые детали подобно Автору, Версии, Описанию…
Пример написания этой секции кода:

/* - - - - - - - - - - - - - - - - - - - - - - - - -

* Имя файла: style.css
* Версия: 1.0.0 (2007-09-21) YYYY-MM-DD
* Вебсайт: http://mysite.ru/
* Автор: Имя разработчика
* Описание: Главная таблица стилей для страниц: ...

== СТРУКТУРА: ======================================

* Ширина Страницы: 950 px
* Количество колонок: 3

====================================================

*/

Основанная Версия

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

* Версия: 1.0.0 (19-06-2008) DD-MM-YYYY

Комментарии

Это не для других, а в первую очередь для вас.
Если вы хотите иметь лучшее понимание того, что вами написано и не запутаться в сотнях, а то и в тысячах стоках кода - всегда делайте это.

Якоря

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

Вот как это делается:

…Ваше Определение Кода (Заголовок CSS файла)…

== ИНДЕКС: ==========================================

_header: Шапка сайта
_topnav: Верхняя горизонтальная навигационная панель
_rightnav: Правая навигационная панель

=====================================================

После CSS определений

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

/* _header ===============================*/
#header {

}

#header .logo {

}

.
.
.

/* _topnav ===============================*/
.
.

CSS Фреймворки

Теперь, когда мы можем использовать многочисленные CSS Фреймворки, это дает нам и преимущества и создает определенные неудобства.
Не затрагивая пока что отрицательные стороны - поговорим о некоторых преимуществах CSS Фреймворков.

Вы можете здорово преобразить ваш CSS, если будете использовать различные файлы подобно:

Typography.css - для основных текстовых правил,
Grid.css - для сеточных расположений или
Layout.css - для общих расположений,
Form.css - для основного моделирования форм,
General.css - для других общих правил.

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

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

Если вы имеете свои соображения по этому вопросу или другие идеи относительно этого подхода - расскажите об этом.

// канатные стропы Днепропетровск
// чайный интернет-магазин
// BIOCLIMATIC в Украине
// Продукция Sebastian в Петербурге
// Обналичить чек Adsense

Теги: CSS, вебдизайн, код, проектирование, разработка, стиль, фреймворк