7 советов по написанию удобного CSS-кода

7 советов по написанию удобного CSS-кода

СSS (каскадные таблицы стилей) - это язык, который используют все разработчики в той или иной мере для того, чтобы воплощать в жизнь свои проекты, делать их красивыми и удобными для посетителя, который видит плоды их трудов на экране своего монитора.

Но что скрывается за кулисами? Так ли красив и приятен для глаз код, который мы пишем, все ли в нем понятно и возможно ли в нем с легкостью разобраться человеку, который вдруг захочет внести в него какие-то изменения? К сожалению, многие даже не задаются подобными вопросами.

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

А теперь перейдем к делу...

7 результативных советов по написанию удобного для чтения и редактирования CSS-кода.

Совет 1. Выберите, как будет выглядеть ваш код и всегда придерживайтесь этого варианта..

Те, кто пишет CSS, по виду написания кода в большинстве своем разделяются на две группы:

  1. Первая группа - это те, кто пишут весь код селектора в одну линию.
  2. div.footer { background: red; padding: 10px; border: 1px solid black; }

    Такой код более оптимизирован, весит меньше, а также занимает меньше строчек, благодаря чему он очень удобен в плане навигации по файлу стилей (не приходится прокручивать огромное полотно, чтобы найти нужный элемент кода). Но для того, чтобы быстро находить нужные свойства в таком варианте, нужно сначала научиться ориентироваться в нем.

  3. Вторая группа - это те, кто каждому свойству отводит свою собственную строчку.
  4. div.footer { 
       background: red; 
       padding: 10px; 
       border: 1px solid black; 
    }

    Такой код менее оптимизирован, файл, содержащий код такого вида, больше весит по сравнению с первым вариантом, но зато он более нагляден, здесь найти нужное свойство не составит труда. И в то же время он не так удобен в плане навигации по всему файлу стилей (приходится долго отматывать, чтобы найти нужную строчку).

Обе эти группы правы по-своему. Просто помните о том, что вам нужно выбрать тот способ, который нравится и будет удобен именно вам. Это самое главное.

Совет 2. Постоянство в названиях элементов.

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

Сейчас объясню, что конкретно я имею ввиду.

Например, каждый раз, когда я работаю с файлами стилей для разных проектов, для блоков с определенными функциями, я даю названия соответственно их предназначению (если это левый сайдбар, то я его называю sidebar-left, если это название для блока с логотипом - logo и т.д.)

И сохраняю ту же самую "терминологию" для своих последующих работ, чтобы каждый раз не изобретать велосипед. smile

Совет 3. Организуйте свой код по принципу "от верха к низу".

Очень удобно, когда код организован "от верха к низу", то есть от шапки к подвалу. Самый удобный вариант лично для меня:

  1. Общие классы (body, a, p, h1, ul, li и т.д.)
  2. Основные блоки сайта (структура)
  3. Шапка сайта
  4. Меню
  5. Контент
  6. Сайдбар и виджеты
  7. Подвал

Таким образом, и зрительно, и логически вам будет более удобно ориентироваться в своем файле стилей, чем при хаотичном расположении элементов.

Совет 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-код был удобным для чтения и редактирования.

Автор статьи: Елена Лощилова.

Комментариев: 12 RSS

Оставьте комментарий!

Вы можете войти под своим логином или зарегистрироваться на сайте.

Комментариев: 12
  •  Максим | 11 января 2013 в 18:24:13

    Спасибо за полезные советы.

  •  Серёга | 11 января 2013 в 19:53:59

    Пожалуйста smile

  •  Елена | 12 января 2013 в 04:53:21

    Пожалуйста, Максим! Пользуйтесь на здоровье ;)!

  •  Владимир | 19 января 2013 в 15:49:15

    Очень хорошая статья. Хорошо красиво написано. Действительно очень дельные советы.

    Во время чтения был уверен, что это статья Сегёги и был очень удивлен, что автор эта милая девушка! Восхищен!

    Статья и советы и милая девушка Елена, действительно хороши!

  •  Елена | 21 января 2013 в 12:30:39

    Спасибо за добрые слова! smile

  •  HD312kbps | 29 января 2013 в 02:39:41

    Вы прям веб-дизайнер, как научились делать, раскажите, какие вообще редактируются файлы в шаблоне D2, а то ксс и хтмл знаю, а незнаю где, что менять.В папке файлов много какие именно нужно править хтмл и ксс. Заранее спасибо!

  •  Елена | 31 января 2013 в 09:33:57

    Спасибо вам! smile

    По шаблону d2 не могу, к сожалению, пока ничего подсказать, так как не разобралась с ним до конца. Уроки по нему, думаю, будут в платном тренинге Сергея по созданию шаблонов. А научилась все делать исключительно по урокам Сергея!

  •  Юрий | 9 апреля 2013 в 03:11:40

    Только CSS не является языком программирования

  •  Елена | 9 апреля 2013 в 04:14:28

    Спасибо, Юрий, за ваше уточнение.

  •  Константин | 21 апреля 2013 в 21:27:54

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

    Но почему то пишутся они не по порядку, а могут начинаться с нескольких открывающих, потом несколько закрыться, далее опять открытые и в конце возможно будут 3-4 закрывающих. Логика в этом конечно не очень понятно, но работает все правильно и без ошибок. Главную роль играет также позиционирование, например текст на главной странице пишется с самого начала, а в двух блоках боковых, применяемых как сидебары, не устанавливается с самого начала а уходит вниз и смотрится это совсем не хорошо.

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

    Источник - Тэги div в шаблоне

  •  Юля | 16 января 2014 в 20:01:03

    Теперь уже нужно писать про Less ;)

  •  Елена | 17 января 2014 в 01:35:24

    Юлия, обратите внимание, что статья была написана более года назад smile

    нужно писать про Less ;)

    Напишите, мы с удовольствием опубликуем вашу статью. smile