Хотелось бы поговорить о правильной организации CSS. Кто-то просто вставляет стили сразу в html страницу, обрамляя их тегом [style]. Скажу Вам сразу – это абсолютно неправильно и не эстетично, т.к. css и html нужно всегда разделять, также как php код и html теги (рассуждения на эту тему ждите в следующих постах). Следуя этой технике, css выносим в отдельный файл, например, styles.css и подключаем его следующим образом: [link rel=stylesheet type="text/css" href="ПУТЬ К ВАШЕМУ CSS"]. Эту методику можно еще более усовершенствовать, для этого css-файл разбивается на логические элементы, которые в свою очередь помещаются в отдельные файлы и выносятся в отдельный каталог.
Моя техника:
[CSS]
——-layouts.css
——-base.css
——-reset.css
——-main.css
Все стили выносятся в папку CSS. В файле layouts.css хранится макет страницы, т.е. div’ы, которые образуют каркас страницы. Файл base.css содержит все остальный элементы страницы. Reset.css – сброс настроек (читайте в следующих постах). И наконец, главный файл – main.css. Его мы и подключаем в html странице (как это сделать см. выше). Содержание этого файла:
@import url(’reset.css’)
@import url(’layouts.css’);
@import url(’base.css’);
Таким образом, в главном css-файле мы подключаем все остальные. Использую эту технику, Мы добиваемся логического разъеденения стилей, например, если нам нужно изменить какой-то из div’ов макета страницы, то Мы сразу открываем файл layouts.css и производим нужные изменения. Для этого не надо больше просматривать один большой файл стилей. А теперь посмотрите как легко с помощью этого метода делать кроссбраузерную верстку. Создаем, например, файл ie.css и помещаем в него хаки под ИЕ, далее в main.css в конец добавляем строку:
@import url(’ie.css’);
Все. Мы подключили хаки для ИЕ сделав станичку кроссбраузерной, при этом не затронули остальные css файлы. Аналогичным образом делаются хаки под ФФ и Оперу. Выводы делать Вам.
Если Вам понравился пост, то подписывайтесь на RSS.
No Comments Yet