Как создать более читаемый CSS

Как создать более читаемый CSS

От автора: в мире CSS есть два типа веб-разработчиков. Первый тип – это 90 процентов всех разработчиков — записывают каждое свойство в отдельной строке. Разработчики второго типа записывают свойства полной строкой для каждого селектора CSS; они составляют оставшиеся 10 процентов.

Вас, наверное, не удивит, что я отношусь к этим 10 процентов, и в этом посте я попытаюсь объяснить, почему написание CSS в одну строку гораздо более читаемо.

Sass для разделения

В наши дни большинство веб-проектов используют те или иные формы препроцессоров CSS, таких как Sass, Less или другие. Работа с препроцессорами CSS значительно упрощает организацию кода в небольшие файлы и разделение его на небольшие компоненты.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

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

Упорядочение свойств по типу

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

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

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

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

Цепочки имен классов CSS

В CSS всегда лучше писать менее специфичные селекторы, поскольку это облегчает переопределение селектора при необходимости. Плохая практика:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Хорошая практика:

Но не делайте так, например. Плохая практика:

Хорошая практика:

Цепочки имен классов с помощью Sass

Создавать цепочки классов с помощью Sass очень просто: используйте символ &.

Если посмотреть на структуру файла Sass, в котором весь контекст находится в одной строке, нам намного проще увидеть все селекторы одновременно, и это значительно облегчает подключение HTML-компонента.

HTML-код компонента хлебных крошек:

Заключение

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

Автор: Elad Shechter

Источник: https://medium.com

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Верстка сайта на HTML5 и CSS3 с нуля

Смотреть

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook: