7 советов по написанию удобного CSS-кода
СSS (каскадные таблицы стилей) - это язык, который используют все разработчики в той или иной мере для того, чтобы воплощать в жизнь свои проекты, делать их красивыми и удобными для посетителя, который видит плоды их трудов на экране своего монитора.
Но что скрывается за кулисами? Так ли красив и приятен для глаз код, который мы пишем, все ли в нем понятно и возможно ли в нем с легкостью разобраться человеку, который вдруг захочет внести в него какие-то изменения? К сожалению, многие даже не задаются подобными вопросами.
Дело в том, что, если вы заботитесь о том, чтобы ваш CSS код было удобно читать, вы заботитесь об экономии времени в будущем, так как вы сможете намного быстрее найти необходимые вам элементы. А также, вы наверняка никогда не знаете, кто будет просматривать и редактировать ваш код после вас и было бы неплохо, чтобы тот человек вспомнил вас все-таки добрым словом.
А теперь перейдем к делу...
7 результативных советов по написанию удобного для чтения и редактирования CSS-кода.
Совет 1. Выберите, как будет выглядеть ваш код и всегда придерживайтесь этого варианта..
Те, кто пишет CSS, по виду написания кода в большинстве своем разделяются на две группы:
- Первая группа - это те, кто пишут весь код селектора в одну линию.
- Вторая группа - это те, кто каждому свойству отводит свою собственную строчку.
div.footer { background: red; padding: 10px; border: 1px solid black; }
Такой код более оптимизирован, весит меньше, а также занимает меньше строчек, благодаря чему он очень удобен в плане навигации по файлу стилей (не приходится прокручивать огромное полотно, чтобы найти нужный элемент кода). Но для того, чтобы быстро находить нужные свойства в таком варианте, нужно сначала научиться ориентироваться в нем.
div.footer {
background: red;
padding: 10px;
border: 1px solid black;
}
Такой код менее оптимизирован, файл, содержащий код такого вида, больше весит по сравнению с первым вариантом, но зато он более нагляден, здесь найти нужное свойство не составит труда. И в то же время он не так удобен в плане навигации по всему файлу стилей (приходится долго отматывать, чтобы найти нужную строчку).
Обе эти группы правы по-своему. Просто помните о том, что вам нужно выбрать тот способ, который нравится и будет удобен именно вам. Это самое главное.
Совет 2. Постоянство в названиях элементов.
Выработайте в себе привычку назвать одни и те же элементы в разных файлах стилей одинаковыми именами. Это поможет вам не запутаться в коде и создаст определенный порядок в вашей голове.
Сейчас объясню, что конкретно я имею ввиду.
Например, каждый раз, когда я работаю с файлами стилей для разных проектов, для блоков с определенными функциями, я даю названия соответственно их предназначению (если это левый сайдбар, то я его называю sidebar-left, если это название для блока с логотипом - logo и т.д.)
И сохраняю ту же самую "терминологию" для своих последующих работ, чтобы каждый раз не изобретать велосипед.
Совет 3. Организуйте свой код по принципу "от верха к низу".
Очень удобно, когда код организован "от верха к низу", то есть от шапки к подвалу. Самый удобный вариант лично для меня:
- Общие классы (body, a, p, h1, ul, li и т.д.)
- Основные блоки сайта (структура)
- Шапка сайта
- Меню
- Контент
- Сайдбар и виджеты
- Подвал
Таким образом, и зрительно, и логически вам будет более удобно ориентироваться в своем файле стилей, чем при хаотичном расположении элементов.
Совет 4. Объединяйте элементы по одинаковым свойствам.
Часто некоторые элементы в файле стилей имеют целый ряд одинаковых свойств. Вместо того, чтобы несколько раз прописывать один и тот же код, почему бы не объединить их вместе и не прописать для них общие свойства?
Например, для элементов, которые имеют один и тот же цвет текста и шрифт:
h1, h2, h3 {font-family: Tahoma; color: #333;}
А позже вы сможете добавить уже конкретные свойства для каждого из них, выписав их по отдельности.
Например:
h1 {size: 28px;}
h2 {size: 24px;}
h3 {size: 18px;}
Совет 5. Комментируйте свой код.
Замечательной особенностью CSS (наряду с другими языками программирования) является возможность комментировать свои записи, используя знак /* перед комментарием и знак */ после комментария:
/*Шапка сайта*/
div.header {width: 960px; margin: 0 auto;}
Такие комментарии будут служить для вас верными якорями при чтении и редактировании кода.
Совет 6. Применяйте знание алфавита.
Располагайте свойства для каждого элемента по алфавиту.
Возможно, поначалу это будет занимать у вас какое-то время, но впоследствии вы привыкнете к этому, будете уже знать, что за чем идет, и уже без проблем найдете нужное свойство, если вам будет нужно его отредактировать.
div.sidebar {
background: #7e0000;
color: #fff;
float: left;
font-weight: bold;
height: 200px;
margin: 0;
padding: 10px 0;
width: 250px;
}
Совет 7. Будьте аккуратны.
Еще один совет - будьте аккуратны, старайтесь, чтобы написанный вами код всегда смотрелся ровно и красиво, чтобы в нем не было лишних и непонятных отступов, или наоборот, "наездов" одного элемента на другой. Самим будет приятно и не стыдно другим показать.
Ну вот, я поделилась некоторыми идеями с вами, которые помогают лично мне писать красивый, удобный для последующего чтения и редактирования код.
Напоследок хочу сказать, что если вы не хотите, вам совсем не обязательно применять на деле все то, о чем я говорю.
Просто это ценные советы, которые помогли лично мне привести в порядок мои файлы стилей и организовать мое мышление в этом плане.
У вас может быть свой собственный стандарт написания кода, и когда вы его создадите, то непременно, вы станете более компетентным сss-мастером, с легкостью пишущим и читающим код.
Только не забывайте, пожалуйста, и других вебмастеров, кто, возможно, будет иметь дело с тем, что вы написали, и чтобы вам не пришлось краснеть за содеянное, позаботьтесь о том, чтобы ваш CSS-код был удобным для чтения и редактирования.
Автор статьи: Елена Лощилова.
Спасибо за полезные советы.
Пожалуйста
Пожалуйста, Максим! Пользуйтесь на здоровье ;)!
Очень хорошая статья. Хорошо красиво написано. Действительно очень дельные советы.
Во время чтения был уверен, что это статья Сегёги и был очень удивлен, что автор эта милая девушка! Восхищен!
Статья и советы и милая девушка Елена, действительно хороши!
Спасибо за добрые слова!
Вы прям веб-дизайнер, как научились делать, раскажите, какие вообще редактируются файлы в шаблоне D2, а то ксс и хтмл знаю, а незнаю где, что менять.В папке файлов много какие именно нужно править хтмл и ксс. Заранее спасибо!
Спасибо вам!
По шаблону d2 не могу, к сожалению, пока ничего подсказать, так как не разобралась с ним до конца. Уроки по нему, думаю, будут в платном тренинге Сергея по созданию шаблонов. А научилась все делать исключительно по урокам Сергея!
Только CSS не является языком программирования
Спасибо, Юрий, за ваше уточнение.
Многие веб-мастера и сайтостроители создавая свои проекты сайтов с помощью HTML таблиц, верстают блоки CSS, и часто применяют див тэги . Оформляются все блоги в основном по парному количеству этих тэгов (сколько открывающих, значит должно быть столько и закрывающих), иначе блоки будут показываться не правильно.
Но почему то пишутся они не по порядку, а могут начинаться с нескольких открывающих, потом несколько закрыться, далее опять открытые и в конце возможно будут 3-4 закрывающих. Логика в этом конечно не очень понятно, но работает все правильно и без ошибок. Главную роль играет также позиционирование, например текст на главной странице пишется с самого начала, а в двух блоках боковых, применяемых как сидебары, не устанавливается с самого начала а уходит вниз и смотрится это совсем не хорошо.
Поэтому, те кто разбирается в правильном отображении верстки блоков и текста знает как это делается, необходимостью у сайтостроителей считается и то чтобы сайт отображался одинаково во всех браузерах Интернета. Иначе когда зайдут на Ваш проект и увидят расползание сайта во все стороны, то уже никогда к Вам не зайдут.
Источник - Тэги div в шаблоне
Теперь уже нужно писать про Less ;)
Юлия, обратите внимание, что статья была написана более года назад
Напишите, мы с удовольствием опубликуем вашу статью.