|
|
Интересные статьи
|
|
|
|
|
Делаем более понятные и удобные файлы стилей 
Привет,
Сегодня мы поговорим об организации файлов стилей. Мы рассмотрим как лучше всего организовывать файлы и форматировать код внутри них, чтобы через какое-то время вы не хватались за голову от того, что стилей стало больше, а порядка и понимания что где находиться — меньше.
Итак, поехали! Информативные название файлов
Это, пожалуй, первое, на что стоит обращать внимание. Название файла стилей должно быть информативным и отражать его содержание, то есть глядя на название файла стилей в папке вы должны сразу понимать, какие именно стили он содержит. В противном случае вам придется открывать каждый в поисках нужного селектора.
Описание внутри каждого файла
Описание каждого файла очень полезно как при командной работе, так и при большом количестве файлов стилей в крупных проектах. Вы можете указывать любые удобные вам параметры, лично я использую следующие: имя файла; назначение хранящихся в этом файле стилей; проект; автор.
Для одного проекта у меня было 10 файлов стилей — несколько общих и остальные для разных разделов сайта. Вот пример оформления файла, отвечающего за стили раздела статей:
Структура стилей внутри файла
Логичность и порядок описания стилей очень сильно облегчают работу, особенно в случае больших файлов.
В начале каждого файла можно делать что-то вроде оглавления:
А потом отмечать каждый из таких блоков соответствующими ему якорями:
Такая организация позволит вам в дальнейшем не вписывать стили «тупо в конец файлика», а располагать их в нужном месте документа, чтобы не создавать хаоса. Вложенные стили
Вложенность стилей должна соответствовать вложенности элементов вашего HTML документа. Это позволяет наглядно показать структуру и зависимость элементов:
Свойства по алфавиту
Такое расположение свойств позволит вам быстрее находить нужные места в коде.
Дополнительные пробелы для отделения свойств от значений
Такой способ форматирования позволит вам сделать стили более наглядными и читабельными. Посмотрите на пример на картинке ниже — какой код более читабельный?
Заключение
Безусловно, все эти ухищрения и приемы нужны только одному человеку из всей аудитории сайта — его разработчику. Поэтому не нужно отдавать стили пользователю как есть — несколько файлов со всеми комментариями, лишними пробелами и табами. Лучше всего расположить на сервере специальный скрипт, который бы собирал файлы в один в нужном порядке, убирал бы из них лишнее и сжимал бы их. Мы, кстати, думаем сделать такой инструмент тут, на Временно.нет. Как вы на это смотрите? Источник: http://vremenno.net
|
|
|
Дивные дивы
Так как я больше серверный программист, чем клиентщик, очень часто бывает ситуация, когда надо быстро сверстать страницу, и вот тут начинаются проблемы |
|
|
|
|