От автора: в мире CSS есть два типа веб-разработчиков. Первый тип – это 90 процентов всех разработчиков — записывают каждое свойство в отдельной строке. Разработчики второго типа записывают свойства полной строкой для каждого селектора CSS; они составляют оставшиеся 10 процентов.
Вас, наверное, не удивит, что я отношусь к этим 10 процентов, и в этом посте я попытаюсь объяснить, почему написание CSS в одну строку гораздо более читаемо.
Sass для разделения
В наши дни большинство веб-проектов используют те или иные формы препроцессоров CSS, таких как Sass, Less или другие. Работа с препроцессорами CSS значительно упрощает организацию кода в небольшие файлы и разделение его на небольшие компоненты.
|
1 2 3 4 5 6 7 |
/*main parts*/ @import "2-components/main-header.scss"; @import "2-components/main-nav.scss"; @import "2-components/mega-menu.scss"; @import "2-components/main-social.scss"; @import "2-components/main-side.scss"; @import "2-components/main-footer.scss"; |
Разделение на небольшие файлы помогает лучше понять код и сосредоточиться на том, что для нас важно.
Упорядочение свойств по типу
Существует много типов свойств: свойства макета, свойства позиции, свойства блочной модели, свойства шрифта и другие. Понимание этого помогает нам упорядочивать свойства по их типам, поэтому, когда мы читаем их, нам гораздо проще ориентироваться в коде.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
.some-component{ /*position*/ position: sticky; z-index: 10; top: 0; /*layout*/ display: flex; align-items: center; /*box-model*/ padding: 15px; border: sold 2px red; /*font*/ color: $common-color-1; font-size: 14rem; /*animation*/ transition: 0.3s height; } |
Запись каждого свойства в отдельной строке приводит к созданию больших CSS-файлов, что для меня похоже на чтение книги, в которой каждое слово находится на отдельной строке, без контекста.
При написании CSS в одну строку я делю стили на типы и присваиваю каждому типу свою строку. Таким образом, я могу быстро сканировать и найти нужный стиль.
|
1 2 3 4 5 6 7 |
.some-component{ position:sticky; z-index:10; top:0; /*position*/ display:flex; align-items:center; /*layout*/ padding:15px; border:sold 2px red; /*box-model*/ color:$common-color-1; font-size:14rem; /*font*/ transition:0.3s height; /*animation*/ } |
Иногда, если нас есть только одно свойство определенного типа, я добавляю его в строку с другим типом. Пример:
|
1 2 3 |
.breadcrumbs{ color:$common-color-1; font-size:14rem; padding:4px 0; } |
Цепочки имен классов CSS
В CSS всегда лучше писать менее специфичные селекторы, поскольку это облегчает переопределение селектора при необходимости. Плохая практика:
|
1 |
.breadcrumbs .breadcrumbs-list{} |
Хорошая практика:
|
1 |
.breadcrumbs-list{} |
Но не делайте так, например. Плохая практика:
|
1 |
.breadcrumbs-list-item{} |
Хорошая практика:
|
1 |
.breadcrumbs-item{} |
Цепочки имен классов с помощью Sass
Создавать цепочки классов с помощью Sass очень просто: используйте символ &.
|
1 2 3 4 5 |
.breadcrumbs{ font-size:14rem; color:$common-color-1; padding:4px 0; &-list{ display:flex; } &-item{ display:flex; align-items:center; } } |
Если посмотреть на структуру файла Sass, в котором весь контекст находится в одной строке, нам намного проще увидеть все селекторы одновременно, и это значительно облегчает подключение HTML-компонента.
HTML-код компонента хлебных крошек:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<nav class="breadcrumbs"> <ol class="breadcrumbs-list"> <li class="breadcrumbs-item"> <a href="/"> <span class="text">Home</span> </a> </li> <li class="breadcrumbs-item is-active"> <span class="text">News</span> </li> </ol> </nav> |
Заключение
Простота чтения и интуитивно понятная связь между CSS и HTML — основные идеи написания свойств CSS в одну строку. Надеюсь, вам понравилась эта статья, и теперь вы лучше понимаете, как упорядочить код, и, возможно, вы захотите написать свойства CSS в одну строку.
Автор: Elad Shechter
Источник: //medium.com
Редакция: Команда webformyself.
