От автора: в мире CSS есть два типа веб-разработчиков. Первый тип – это 90 процентов всех разработчиков — записывают каждое свойство в отдельной строке. Разработчики второго типа записывают свойства полной строкой для каждого селектора CSS; они составляют оставшиеся 10 процентов.
Вас, наверное, не удивит, что я отношусь к этим 10 процентов, и в этом посте я попытаюсь объяснить, почему написание CSS в одну строку гораздо более читаемо.
Sass для разделения
В наши дни большинство веб-проектов используют те или иные формы препроцессоров CSS, таких как Sass, Less или другие. Работа с препроцессорами CSS значительно упрощает организацию кода в небольшие файлы и разделение его на небольшие компоненты.
/*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";
Разделение на небольшие файлы помогает лучше понять код и сосредоточиться на том, что для нас важно.
Упорядочение свойств по типу
Существует много типов свойств: свойства макета, свойства позиции, свойства блочной модели, свойства шрифта и другие. Понимание этого помогает нам упорядочивать свойства по их типам, поэтому, когда мы читаем их, нам гораздо проще ориентироваться в коде.
.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 в одну строку я делю стили на типы и присваиваю каждому типу свою строку. Таким образом, я могу быстро сканировать и найти нужный стиль.
.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*/ }Иногда, если нас есть только одно свойство определенного типа, я добавляю его в строку с другим типом. Пример:
.breadcrumbs{ color:$common-color-1; font-size:14rem; padding:4px 0;
}Цепочки имен классов CSS
В CSS всегда лучше писать менее специфичные селекторы, поскольку это облегчает переопределение селектора при необходимости. Плохая практика:
.breadcrumbs .breadcrumbs-list{}Хорошая практика:
.breadcrumbs-list{}Но не делайте так, например. Плохая практика:
.breadcrumbs-list-item{}Хорошая практика:
.breadcrumbs-item{}Цепочки имен классов с помощью Sass
Создавать цепочки классов с помощью Sass очень просто: используйте символ &.
.breadcrumbs{ font-size:14rem; color:$common-color-1; padding:4px 0; &-list{ display:flex; } &-item{ display:flex; align-items:center; }
}Если посмотреть на структуру файла Sass, в котором весь контекст находится в одной строке, нам намного проще увидеть все селекторы одновременно, и это значительно облегчает подключение HTML-компонента.
HTML-код компонента хлебных крошек:
<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
Источник: https://medium.com
Редакция: Команда webformyself.