От автора: эти 10 советов по работе с CSS помогут вам сэкономить время и лучше взаимодействовать с командой.
Иногда мы думаем, что знаем все, что нам нужно знать о SCSS, и что мы можем уделить больше времени JavaScript. Мне жаль, что я говорю это, но вы должны уделять больше внимания таблицам стилей. Я работала в проектах, где код превращался в спагетти только потому, что не были применены несколько простых рекомендаций. Я быстро поняла, насколько ценными могут быть полезные советы при работе с другими людьми над базой кода, которая в мгновение может стать довольно большой.
Вот почему сегодня я делюсь с вами 10 рекомендациями по SCSS, которые помогут вам и вашей команде. Начните использовать их, и ваши товарищи по команде и люди, которые позже примут ваш код, будут вам благодарны. (Кстати … это один из немногих способов получить дополнительные очки к карме.)
Совет № 1: Примите Конвенцию BEM
Вы когда-нибудь попадали в проект и не знали, как начать читать или понимать имена классов CSS? Да, мы все оказывались в такой ситуации. Вот почему всякий раз, когда я начинаю новый проект или присоединяюсь к нему, одной из моих первых оптимизаций стиля кода является реализация BEM и обеспечение того, чтобы все следовали этому.
BEM обозначает Block, Element, Modifiers. Дополнительное значение, которое это соглашение об именах CSS-классов вносит в таблицу, очень просто: оно позволяет визуализировать структурированный стиль вашего шаблона. На практике это работает еще проще:
Вы именуете блоки страницы, например: class=»button».
Затем, вы именуете элементы внутри каждого блока с помощью двух символов подчеркивания (чтобы показать, что это часть блока): class=»button__icon».
И в случае, если у вас есть вариант этого блока, используйте два тире для модификатора: class=»button button—red».
Итак, в вашем шаблоне это будет выглядеть так:
<button class="button button--blue"> <img class="button__icon" src="http://www.bem-br.org/img/logo.png" alt="icon-blue"/> <p class="button__label">Use BEM</p> </button> <button class="button button--red"> <img class="button__icon" src="http://www.bem-br.org/img/logo.png" alt="icon-red"/> <p class="button__label">Please use BEM</p> </button>
Редактирование стилей станет намного проще, потому что вы сможете визуализировать структуру кода:
.button { border: none; margin: 20px; cursor: pointer; .button__icon { width: 20px; height: 20px; } .button__label { color: white; padding: 20px 40px; text-align: center; text-transform: uppercase; font-size: 16px; } // --> MODIFIERS: COLORS <-- &--blue { background-color: blue; } &--red { background-color: red; } }
Совет № 2: Не повторяйтесь, используйте переменную экстраполяцию для имен классов блока
Если вы следуете правилам BEM (или собираетесь это делать), вот еще одна полезная практика, которой вы можете следовать, чтобы ускорить время разработки: использование переменной экстраполяции. Таким образом, вы не будете повторяться.
Это довольно просто — вы просто определяете класс блока в переменной (в приведенном выше примере .button) и заменяете его, используя #{$c} в коде CSS. Давайте используем приведенный выше пример, чтобы увидеть, как это работает:
$c: “.button” #{$c} { border: none; margin: 20px; cursor: pointer; &--blue { background-color: blue; } &--red { background-color: red; } #{$c}__icon { width: 20px; height: 20px; } #{$c}__label { color: white; padding: 20px 40px; text-align: center; text-transform: uppercase; font-size: 16px; } }
Это небольшое и простое улучшение, но нам не нужно переписывать имя класса блока каждый раз (или просто иметь возможность обновлять его в одном месте), это ускоряет процесс, улучшает читаемость кода и делает структуру кода CSS прозрачной.
Совет № 3: Структурируйте проект с помощью InuitCSS
Вы можете представить себе InuitCSS, как фреймворк CSS. Даже если он не предоставляет вам компоненты пользовательского интерфейса или что-то в этом роде.
Вместо этого InuitCSS помогает нормализовать, настроить, гомогенизировать и структурировать таблицы стилей.
Звучит абстрактно? Хорошо, давайте посмотрим, как это происходит.
Во-первых, установите InuitCSS с помощью npm install inuitcss —save. Теперь все, что вам нужно сделать, это познакомиться со структурой каталогов CSS, специфичной для InuitCSS , и следовать ей, чтобы установить структуру ресурсов проекта:
/settings: Здесь находятся все глобальные переменные, настройки всего сайта и конфигурации. Например, вместо того, чтобы объявлять переменные цвета в каждой из таблиц стилей, я просто помещаю их и объединяю в один файл в этой папке.
/tools: В папке «Tools» вы определяете миксины и функции проекта, большую часть времени я использую ее для хранения миксинов Sass, которые использую для адаптивных медиа-запросов.
/generic: Здесь вы можете указать правила CSS с низкой специфичностью, такие как normalize.css, и сбросить наборы правил.
/elements: Когда вам нужно стилизовать неклассированные элементы HTML, такие как ссылки, страницы, изображения, таблицы и т. д., вы можете просто создать для этого таблицу стилей в этой папке.
/objects: В папке объектов вы размещаете объекты, абстракции и шаблоны дизайна, такие как макеты.
/components: Это место, где хранятся стили конкретных компонентов пользовательского интерфейса. Честно говоря, я никогда не использую ее, просто потому, что кодирую свои проекты с помощью Vue.js, а он использует отдельные файловые компоненты.
/utilities: Папка утилит предназначена для всех очень специфичных, очень явных селекторов, таких как анимации, которые вы должны использовать в своем проекте.
Это довольно аккуратно, я знаю!
Совет № 4: Используйте наборы данных для группировки цветов
Если вы используете циклы Sass, я определенно рекомендую использовать наборы данных, особенно если это связано с определением цветов.
Давайте рассмотрим это на примере социальных кнопок. Как вы можете догадаться, социальные кнопки (Facebook, Twitter и т. д.) имеют разные цвета. Поэтому вместо того, чтобы написать это:
// VARIABLES $c: ".c-social-button"; #{$c} { border: none; border-radius: 4px; color: $white; user-select: none; cursor: pointer; // --> NETWORKS <-- &--facebook { background: #3b5998; } &--google { background: #db4437; } &--messenger { background: #0084ff; } &--twitter { background: #1da1f2; } }
Вы можете выбрать более элегантный способ:
// VARIABLES $c: ".c-social-button"; $networks: facebook, google, messenger, twitter; // THE DATASET FOR SOCIAL COLORS $socialColors: ( facebook: #3b5998, google: #db4437, messenger: #db4437, twitter: #1da1f2 ); #{$c} { border: none; border-radius: 4px; color: $white; user-select: none; cursor: pointer; // --> NETWORKS <-- @each $network in $networks { &--#{network} { background: map-get($socialColors, $network); } } }
Совет № 5: Примите Соглашение об именовании Veli Colorpedia
Если ваше соглашение об именовании цветов светло-розовое, хлопайте в ладоши. Если ваше соглашение об именовании цветов темно-синее, хлопайте в ладоши. Convention Если ваше соглашение об именовании цветов средне-серое, хлопайте в ладоши.
Хорошо, вы поняли суть: использование таких терминов, как светлый, темный, средний и т. д. в качестве соглашения об именовании цветов проекта очень ограничивает, просто потому, что есть некоторые проекты, в которых у вас будет много цветов.
Вместо того, чтобы каждый раз чесать голову, я просто использую Veli’s colorpedia. Таким образом, вы получите имена цветов, понятные человеку, но не ограниченные светлым / средним / темным спектром.
Дополнительные преимущества от использования Colorpedia — она предоставляет подходящие цвета и даже говорит вам, как дальтоник видит их. Некоторые дизайнеры — это просто ангелы, посланные с небес.
Совет № 6: Избегайте использования миксинов везде
Когда вам не нужно использовать миксин, просто не не используйте его! Почему? Потому что, когда вы используете миксины, они должны быть хорошо структурированы и тщательно поддерживаться. Использование миксинов без уважительной причины — лучший способ потеряться в процессе развития проекта. Они могут вызывать побочные эффекты и их трудно обновлять, когда они используются во многих местах. Поэтому используйте их осторожно.
Если вы не знаете, когда и следует ли вообще использовать миксин, помните одно правило: миксины предназначены для того, чтобы избежать повторения, сохраняя Единый Источник Истины. Кроме того, на сегодняшний день, например, нам не нужно использовать миксины для префикса свойств CSS, потому что у нас есть плагины, такие как PostCSS Autoprefixer, которые делают тяжелую работу за вас.
Совет № 7: Оптимизируйте медиа-запросы с помощью SASS MQ
Sass MQ — это миксин с открытым исходным кодом, созданный разработчиками, работающими в The Guardian (интересно!). Он удивителен по двум причинам:
Он компилирует ключевые слова и значения px/ em для запросов на основе em, поэтому, когда пользователи увеличивают масштаб страницы, содержимое не оказывается полностью зашифрованным.
Он предоставляет запасные варианты для старых браузеров, таких как IE8.
Это просто работает через компиляцию этого кода:
$mq-breakpoints: ( mobile: 320px, tablet: 740px, desktop: 980px, wide: 1300px ); @import 'mq'; .foo { @include mq($from: mobile, $until: tablet) { background: red; } @include mq($from: tablet) { background: green; } }
В это:
@media (min-width: 20em) and (max-width: 46.24em) { .foo { background: red; } } @media (min-width: 46.25em) { .foo { background: green; } }
Элегантно, просто и полезно. Не так ли?
Совет № 8: Используйте CSSComb
Еще одна последняя вещь, чтобы получить чистый код CSS. Я знаю, что у каждого из нас есть собственный способ написания кода CSS, но вносит несоответствие при работе над проектом с кем-то еще или с командой.
Вот почему я использую CSS Comb. Я установила на VSCode расширение, и каждый раз, когда я запускаю новый проект, я устанавливаю в корне файл .csscomb.json.
Файл .csscomb.json включает в себя конфигурацию, которая преобразует ваш CSS-код и код вашего товарища по команде в единый формат при каждом запуске расширения.
Вы можете использовать мою собственную конфигурацию CSS Comb или настроить свою, просто выбрав, как должен выглядеть ваш код CSS.
Совет № 9: Использование заполнителей часто может быть отличным приемом
В проекте у меня есть набор свойств, которые определяют темный фон. Мне очень часто приходится набирать их снова и снова. Вот как очень удобно использовать заполнитель:
// The placeholder selector %darkbg { border: 1px solid #000000; background: #101010; box-shadow: 0 1px 5px 0 rgba(#404040, 0.6); } .my-dark-block-for-errors { @extend %darkbg; // Some other properties for errors } .my-dark-block-for-success { @extend %darkbg; // Some other properties for success }
Это компилируется в следующий код CSS:
.my-dark-block-for-errors, .my-dark-block-for-success { border: 1px solid #000000; background: #101010; box-shadow: 0 1px 5px 0 rgba(#404040, 0.6); } .my-dark-block-for-errors { // Some other properties for errors } .my-dark-block-for-success { // Some other properties for success }
Обратите внимание, что это заставило наши два блока расширить заполнитель. Больше не нужно повторяться и вспоминать эти свойства.
Совет № 10: Потратьте несколько минут, чтобы посмотреть Awesome-Sass.
Awesome-Sass — это кураторский список потрясающих фреймворков Sass и SCSS, библиотек, руководств по стилю и статей. Это фантастический ресурс, который продолжает постоянно обновляться. Он включает так много интересных ресурсов, что позволит вам углубить свои навыки Sass, просто просматривая его в течение нескольких часов. Например, именно здесь я обнаружила Sass Guidelines или Sassline.
Я надеюсь, что эта статья была полезна вам. Sass определенно сэкономит ваше время, и я также считаю, что он сделал меня лучшим разработчиком.
Автор: Nada Rifki
Источник: https://www.telerik.com
Редакция: Команда webformyself.