вход

Как писать хороший и понятный код CSS

Как писать хороший и понятный код CSS

Существует много различных стилей при написании кода, одним не нравятся отступы, другие используют заглавные буквы, третьи используют несколько элементов на одной строке. Но все они хотят достичь одной единственной цели: создать хороший и понятный код. Правда каждый видит это по своему и идёт к этому своими путями. Хотя с опытом появляются некоторые единственно верные приемы, выявленные экспериментальным путем. Сегодня, не рассматривая мой собственный стиль написания кода, я все ещё на пути совершенствования, попробуем обсудить несколько советов по написанию лучшего и понятного кода CSS. Все возражения и дополнения, как всегда принимаются в комментариях. Встретимся там;)

Добавляйте комментарии.

Комментарии, пожалуй самая нелюбимая часть в написании кода. Но чем хорошо комментирование? Комментирование значительно улучшает как восприятие и понимание кода, так и работу с самим кодом. По комментариям можно легко и эффективно определить нужные блоки CSS, а порой и понять для чего созданы те или иные правила. Порою бывает весьма затруднительно найти нужную сточку в сплошной массе из строк с кодом. Каждый раз приходиться тратить массу времени на перелистывание и просмотр сотен строк. Но если ваш код разделён на логические блоки и каждый блок хорошо прокомментирован, то поиск нужной строки в таких блоках становиться очень быстрым. Вместо поиска среди множества строк кода, ваш поиск сужается к поиску среди нескольких комментариев, и нескольких строк кода рядом с нужным комментарием. Это значительно упрощает поиск и сохраняет массу времени. Но комментирование не только упрощает поиск. Оно хорошо структурирует и весь код. Ваш код будет выглядеть легким и понятным. К тому же, комментарии говорят о профессионализме разработчика, который выработал привычку ставить правильные, а порой и ключевые комментарии.

Применяйте абзацы.

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

Используйте сокращенную запись кода.

Сокращенный код это возможность записывать некоторые правила CSS в кратком виде. Я считаю, что это одна из самых удобных вещей в CSS. Например, вместо правил для отступов padding-top:5px; padding-right:5px; padding-bottom:5px; padding-left:5px; можно записать значительно короче padding: 5px 5px 5px 5px;. Значительная разница, как в написании, так и в восприятии, неправда ли? Однако, несмотря на эту возможность, существует множество документов CSS в которых совсем нет сокращенного кода.

Представьте, что у вас 350 строк CSS кода, где каждый класс или ID состоит из пяти правил, и вы используете сокращенный код скажем для правила margin. А теперь попробуйте вместо сокращенного кода, написать развернутый код для правила margin: margin-top, margin-right, margin-bottom, margin-left. Получается, что каждый класс или ID получает по три дополнительных строки. Так мы увеличиваем 350 строк кода до 500. Получется, что мы просто добавили лишних 150 строк ненужного кода, ухудшая навигацию всего докумета и усложняя работу с правилами.

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

Используйте одно правило на строке.

Одна из самых раздражающих вещей, которые можно часто увидеть в коде CSS, это запись нескольких правил на одной строке. Я думаю это не только некрасиво, но и неэффективно. Эффективность кода начинается с организации, поскольку организация ускоряет кодирование и облегчает ориентацию в коде. И все это в конечном итоге приводит к производительности. Не создавая хаоса и располагая отдельные правила CSS на отдельных строках, вы значительно облегчаете себе жизнь. Вы поймете это в долгосрочной перспективе, когда вам придется вносить изменения в документ со стилями.

Выделяйте хаки в отдельный файл.

Всегда отделяйте ваши хаки стилей для всеми любимого Internet Explorer от основного документа со стилями. Пусть в основном документе CSS у вас останутся все правила для ваших страниц, которые будут отображаться в нормальных браузерах. Создайте раздельные документы для стилей с хаками CSS для разных версий браузера Internet Explorer. Если вы смешиваете хаки с основным документом, то вы не только усложняете сам документ, но и делаете его не валидным. Потому, что вы не можете поместить в одном документе код для разных версий браузеров. Поэтому, упрощайте максимально стили, разделяйте их в отдельные документы. Так вы получите хорошо организованную структуру.

Давайте осмысленные имена CSS классам и ID

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

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

Удаляйте неиспользуемые CSS классы и ID немедленно.

Довольно часто, внося изменения в проект, мы создаем новые классы и идентификаторы, заменяя ими старые, и уже ненужные. Иногда просто не используем какие то классы и идентификаторы. Но вместо того, чтобы сразу удалить неиспользуемые элементы, мы почему то храним их. Постепенно документ со стилями начинает содержать много неиспользуемых классов и идентификаторов, усложняя тем самым работу с документом. Начинает происходить путаница среди используемых и неиспользуемых элементов. Поэтому вы должны взять за правило сразу же удалять ненужные элементы, если они не используется на страницах. Если же вы чувствуете, что некоторые из них могут вам понадобиться в будущем, перенесите их в отдельный архивный файл. Не храните их в основном документе.

Используйте алфавитный порядок.

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

Располагайте селекторы вместе

Еще один простой способ организовать свои документы со стилями, это комбинация различных селекторов, если они имеют похожие определения или правила стилей. Например, если у вас есть похожие определения стилей для тегов li и ol, то вы можете объединить их вместе в одно определение. Так вы сэкономите место и добьетесь более компактной записи, которая всегда легче воспринимается.

Разделите сложный документ CSS на несколько простых

Если вы работаете над очень большим проектом, и пытаетесь изменить документ со стилями, путаясь в бесконечных строчках CSS, то я бы советовал вам просто разделить его на более мелкие и простые. Попробуйте сначала логически разделить ваш документ со стилями на несколько групп. А затем разделите сам документ на несколько файлов и поместите в них ваши группы.

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

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

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

Заключение.

Надеюсь эти советы будут полезны для вас, и вы сможете написать более лучший и понятный код CSS. Что вы думаете? Используете ли вы те приемы, что описаны выше при написании CSS? Что вы можете посоветовать ещё? Что вы предпочитаете? Пожалуйста, напишите в комментариях!

Качественные премиум темы и шаблоны для Вашего сайта:

Смотреть полный каталог качественных тем и шаблонов

Здесь Вы можете выбрать из более чем 46 000 готовых дизайнов. Шаблоны сайтов + установка + хостинг + персонализация + поисковая оптимизация + копирайтинг — все эти услуги вы всегда можете получить от профессионалов мирового уровня!


Нашли это полезным? Поделитесь с другими:
Не останавливайтесь, читайте дальше:
4 комментария

Статья → Как писать хороший и понятный код CSS

  1. Realist_nerd:

    Хорошие советы! Про алфавитный порядок не знал, но упорядочивал по-другому. У меня порядок был по структуре сайта. Тут, наверное, кому как удобно. Улыбнул момент про хаки для эксплорера и про “нормальные браузеры”.

  2. Александр:

    пример бы еще привели хорошего кода css

  3. Полезные советы.
    Разве что алфавитный порядок не всегда уместен. Очень часто, особенно при небольших проектах, удобней располагать стили по их “сущности”, например те, которые чаще приходится менять в процессе первоначальной верстки или те, которые регулируют похожие параметры у схожих групп элементов.
    Про выделение хаков в отдельный файл и правда довольно интересный момент. Обязательно надо будет его попробовать.

  4. Николай:

    @Александр
    Если придерживаться данных советов, то и получиться хороший код. :-) Хотя можно было бы примерами дополнить.

    @Ex.clusive
    Конечно расположение стилей по их “сущности” тоже хороший вариант, ведь это тоже упорядочивает код, а значит с ним легче работать.

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

Статья → Как писать хороший и понятный код CSS

Правила комментирования

  1. Кoммeнтapий всегда проходит премодерацию.
  2. В поле "URL блога" можно указывать только ссылку на главную страницу вашего блога. Ссылки на прочие веб-ресурсы (в том числе блоги/сплоги, созданные не для людей) будут удалены.
  3. Запрещается использовать в качестве имени комментатора слоганы/названия сайтов, рекламные фразы, ключевые и т.п. слова. В случае несоблюдения этого условия имя изменяется по усмотрению владельца блога. Просьба указывать нормальное имя или ник.
  4. Весьма вероятно, что короткий и неинформативный кoммeнтapий вида "Спасибо!", "Интересная статья", будет удален. Исключение составляют знакомые автору блога комментаторы.