Рекомендации написания CSS-кода

Зачастую, когда мы пишем код, мы не думаем о том, что мы или другие разработчики будут читать его позже, поэтому совершаем множество ошибок, которые могут затруднять чтение и понимание стилей. В данной статье мы рассмотрим основные рекомендации стилизации CSS-кода и исправим «нечитаемый» CSS.

 

1) Каждое свойство стилей на отдельной строке

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

2) Каждый селектор на отдельной строке

Также, как и со свойствами стилей, селекторы проще найти, особенно когда много практически одинаковых элементов и нужно объединить некоторые свойства. О принципе DRY (Don’t repeat yourself (англ.) – не повторяйся) мы поговорим в другой раз.

3) Чем сильнее свойство влияет на элемент, тем выше оно пишется 

 

1. Сначала идут свойства, определяющие позиционирование элемента относительно других элементов, такие как: position, z-index, left/right/top/bottom.
2. Потом идут свойства, определяющие поведение элемента, а также размеры и отступы: display, float, height, width, margin, padding.
   
3. Отдельно идёт свойство border, т.к. оно частично относится к размерам. Входит border в размеры или нет определяет свойство box-sizing, о нём можно узнать здесь.
4. После идут свойства, определяющие общие стили элемента: overflow, cursor, outline, transition, box-shadow...
5. И в конце свойства, которые влияют на оформление и типографику: color, background, opacity, font, letter-spacing, line-height.

 

Порядок объявления подробных правил, например font-size и font-style, должен соответствовать порядку в сокращённой версии правила (font). То есть сначала идёт font-style, а уже затем font-size.

Данная логика сортировки позволит не искать в «полотне» стилей определённый, например, position, ведь он всегда будет наверху.

Существует и альтернативный вариант сортировки свойств стилей, где после второго пункта идёт оформление (border, opacity и др.) и типографика, далее анимании и в конце остальные стили.

 

 

Так же стоит упомянуть и о пробелах и табуляции.

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

Табуляция – это тоже важная часть визуализации кода. Это определённый отступ, или, «красная строка» перед кодом, разделяющая код на логические блоки. Важно знать, что отступы можно делать с помощью клавиши Tab и с помощью Пробела, однако, например, руководство по оформлению кода от Google гласит, что лучше использовать пробелы. В основном логический блок табуляции составляет 2/4 пробела.

 

Теперь мы умеем писать красивые блоки CSS-кода, которые будут понятны каждому разработчику. Не забываем и о том, что данному стайлгайду нужно придерживаться во всём проекте, не зависимо от папок или расположения CSS-файлов. И помните, данные рекомендации — это не истина в последней инстанции, это лишь самые популярные советы по написанию CSS.

За основу данной статьи взята статья «Правила форматирования CSS».

 

Хочешь научиться создавать сайты? Изучи все на практике, с помощью интерактивных курсов у нас на проекте. Регистрация - Войти - Наши курсы. Задавайте вопросы в комментариях!