htmllessons.ru

Рекомендации написания CSS-кода
Зачастую, когда мы пишем код, мы не думаем о том, что мы или другие разработчики будут читать его позже, поэтому совершаем множество ошибок, которые могут затруднять чтение и понимание стилей. В данной статье мы рассмотрим основные рекомендации стилизации CSS-кода и исправим «нечитаемый» CSS.
1) Каждое свойство стилей на отдельной строке
Как просто было сделано и как лучше стало! Теперь свойства не нужно выискивать в одной строке, они будут сразу визуально выделяться пустым пространством.
2) Каждый селектор на отдельной строке
Также, как и со свойствами стилей, селекторы проще найти, особенно когда много практически одинаковых элементов и нужно объединить некоторые свойства. О принципе DRY (Don’t repeat yourself (англ.) – не повторяйся) мы поговорим в другой раз.
3) Чем сильнее свойство влияет на элемент, тем выше оно пишется
- Сначала идут свойства, определяющие позиционирование элемента относительно других элементов, такие как: position, z-index, left/right/top/bottom.
- Потом идут свойства, определяющие поведение элемента, а также размеры и отступы: display, float, height, width, margin, padding.
- Отдельно идёт свойство border, т.к. оно частично относится к размерам. Входит border в размеры или нет определяет свойство box-sizing, о нём можно узнать здесь.
- После идут свойства, определяющие общие стили элемента: overflow, cursor, outline, transition, box-shadow...
- И в конце свойства, которые влияют на оформление и типографику: 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».
Хочешь научиться создавать сайты? Изучи все на практике, с помощью интерактивных курсов у нас на проекте. Регистрация - Войти - Наши курсы. Задавайте вопросы в комментариях!