Создание начальных установок css стилей (часть 1).
Главной проблемой современной css верстки является
кроссбраузерность (одинаковое отображение во всех популярных браузерах). Решение этой проблемы заключается в том, чтоб
правильно создать файл css стилей для будущего сайта. Большинство начинающих web-мастеров игнорируют тот факт, что
правильно спроектированный css очень сильно упрощает создание кроссбраузерного сайта, а в будущем и его
сопровождение. А ведь даже, если появляются какие либо проблемы связанные с
css, их проще решить если файл css имеет нужный и структурированный набор правил. В данной статье я коснусь всех главных аспектов создания правильного, чистого,
кроссбраузерного css.
1. Выбор названия файла css стилей и количество файлов.
Самым первым шагом
создания css стилей будущего сайта, является выбор названия. При этом выборе нужно прежде всего руководствоватся здравым смыслом и не придумывать названий типа
mai_css_stitli.css и в таком роде. Самое логичное название это:
style.css Также важный шаг при создании файла - это выбор количества будующих файлов стилей на начальной стадии создания сайта. Так как в будущем сайт может состоять из нескольких сотен страниц и если не использовалась cms, то дописывать в каждый
html файл еще один файл стилей будет пробламатично.
Принимать решение о создании нескольких файлов
css нужно в том случае, если планируется
создание большего количества css правил. В таком случае для структурирования можно использовать несколько css файлов. Названия можно выбрать, к примеру, такие:
style.css для описания стилей оформления контента.
layout.css для описания правил расположения (размеры и отступы).
Создание большего количества файлов стилей не рекомендуется, но и не запрещается ;-)
Так что, это решать только разработчику сайта.
2. Создание структуры файла стилей.
Очень важным для упрощения редактирования css стилей в будущем является создание структуры css файла. Структурированный файл стилей проще редактировать, легче находить в нем нужные css правила. Этот шаг на первый взгляд может показатся бессмысленным, но в будущем упростит работу со стилями сайта.
Я советую разбить файл стилей на несколько частей, разделяя их комментариями. В названиях комментариев нужно избегать кирилицы (русских букв), не использовать много текста, но при этом создавать дополнительную смысловую нагрузку.
/**************/
Благодаря этому мы сможем легко находить нужное нам правило даже в большом количестве css описаний. При создании начальных установок css я советую разбить с помощью комментариев css файл на следующие "зоны" :
/****global**********/
...
/****header**********/
...
/****content**********/
...
/****footer**********/
Таким образом вы уже изначально назначите расположение описания стилей и тем самым сможете избегажать ряда проблем, связанных с путаницей.
3. Правила создания css правил.
Конечно же не существует жестких правил для описания css свойств, но существет одно правило - это "правило хорошего тона", которое упрощает чтение css файла и указывает на профессионализм web разработчика.
НЕ правильно:
div{ padding:10px; margin:20px; }
Правильно:
div
{
padding:10px;
margin:20px;
}
4. Семантика названий css классов.
Существует много мнений насчет того, какие же должны быть названия css классов. Я лишь приведу несколько важных правил:
- Название css класса должно отображать предназначение, а не свойство класса.
- Если название класса состоит из нескольких слов, разделять их нужно с помощью дефиса "-", а не нижним подчеркиванием "_"
4. Подключение файла стилей в html.
Для использования
файла стилей его
нужно подключить к html странице, для этого существует следующая команда, которую нужно написать между тегами <head>..</ head>
<link type="text/css" rel="stylesheet" href="style.css" /> Во второй части статьи будет расмотрено пошагово описание нужных
css правил для создания начальных
установок css свойств для любого сайта.
Добавить комментарий
