Статьи

Использование вспомогательных классов для сушки и масштабирования CSS

Сентябрь 25, 2018

Вы начинаете новый веб-проект и ищете новую методологию CSS, которая поможет вам масштабировать ваш код. Доступен растущий набор методов для написания модульных CSS, включая SMACSS , BEM и ряд других подобных методологий, основанных на объектно-ориентированном CSS (OCSS). Как видите, существует множество методов написания и организации CSS.

Помимо всех этих методологий, есть кое-что, что может помочь нам написать СУХОЙ , менее повторяющийся код: вспомогательные классы (также называемые служебными классами).

Эта концепция обсуждалась некоторое время назад в статье Тьерри Кобленца о Smashing Magazine , но я подумал, что объясню этот метод своими словами здесь.

Что такое вспомогательные классы?

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

Давайте посмотрим на простой пример того, как выглядят служебные классы и как мы можем их использовать. Посмотрите на следующий фрагмент кода: 

.left { float: left; } .right { float: right; } .text-left { text-align: left; } .text-right { text-align: right; } .text-center { text-align: center; }

Здесь мы создали набор правил CSS, которые мы можем использовать позже при создании новых компонентов. Например, если вы хотите выровнять некоторый контент по левому краю, вы можете использовать text-left класс. Аналогично, вы можете использовать left или right классы для перемещения элементов в нужном направлении.

Давайте посмотрим на другой пример поля, которое должно быть слева с центрированным внутренним содержимым.

Мы обычно делаем что-то вроде этого: 

 <div class="box"> </div>

С этим CSS: 

 .box { float: left; text-align: center; }

Вместо этого мы можем достичь того же самого, используя вспомогательные классы многократного использования и с одной ответственностью: 

 <div class="left text-center"> </div>

Обратите внимание, как я удалил класс box и вместо этого добавил наши предопределенные классы left и text-center .

Если вы хотите изменить float и выровнять направления, вместо того, чтобы делать это для .box класса .box , вы можете использовать другие вспомогательные классы: 

 <div class="right text-right"> </div>

Система сетки является хорошим примером использования вспомогательных классов. Вот пример из сетки Фонда : 

 <div class="row"> <div class="small-2 large-4 columns"></div> <div class="small-4 large-4 columns"></div> <div class="small-6 large-4 columns"></div> </div>

Foundation предоставляет множество классов, которые можно использовать и комбинировать вместе, чтобы создать сетку с разной шириной для разных размеров экрана. Эта гибкость помогает разработчикам быстрее создавать новые пользовательские макеты, не редактируя CSS для самой сетки. Например:

  • .small-2 и .large-4 будут устанавливать ширину элемента в зависимости от размера экрана.
  • Класс .row устанавливает ширину контейнера, содержащего столбцы.
  • Класс .columns устанавливает отступы и значения с плавающей точкой.

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

Поля и отступы

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

Мы начнем с определения переменной (используя Sass) для базового пространства для нашего проекта. Давайте начнем с 1em и, 1em того, мы можем создавать классы для разных размеров пространства. 

 $base-space-unit: 1em; // Top margin .margin-top-none { margin-top: 0; } .margin-top-quarter { margin-top: $base-space-unit / 4; } .margin-top-half { margin-top: $base-space-unit / 2; } .margin-top-one { margin-top: $base-space-unit; } .margin-top-two { margin-top: $base-space-unit * 2; } // Top padding .padding-top-none { padding-top: 0; } .padding-top-quarter { padding-top: $base-space-unit / 4; } .padding-top-half { padding-top: $base-space-unit / 2; } .padding-top-one { padding-top: $base-space-unit; } .padding-top-two { padding-top: $base-space-unit * 2; }

В качестве альтернативы мы можем выбрать короткие имена классов, как в примере кода ниже от Basscss 

 .m0 { margin: 0 } .mt0 { margin-top: 0 } .mr0 { margin-right: 0 } .mb0 { margin-bottom: 0 } .ml0 { margin-left: 0 }

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

Ширина и высота

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

 <div class="contact-section"> <!-- Content here... --> </div>

И наш CSS: 

 .contact-section { height: 100%; }

Для других разделов мы повторим код: 

 <div class="services-section"> <!-- Content here... --> </div>

И CSS: 

 .services-section { height: 100%; }

Но мы можем уменьшить все это одним классом, который называется full-height : 

 <div class="full-height"> <!-- Content here... --> </div>

Ниже приведены некоторые похожие примеры, включая класс full-height использованный выше: 

 .fit { max-width: 100%; } .half-width { width: 50% } .full-width { width: 100%; } .full-height { height: 100%; }

Положение и Z-индекс

Связанные с положением свойства могут быть объединены с другими свойствами, такими как z-index для создания сложного макета. Мы можем создать набор классов, чтобы установить точное положение любого элемента по отношению к области просмотра или элементу-предку (справа, слева, сверху слева и т. Д.): 

 .fixed { position: fixed; } .relative { position: relative; } .absolute { position: absolute; } .static { position: static; } .zindex-1 { z-index: 1; } .zindex-2 { z-index: 2; } .zindex-3 { z-index: 3; } .pin-top-right { top: 0; right: 0; } .pin-bottom-right { bottom: 0; right: 0; }

Вспомогательные классы «pin» основаны на CSS Mapbox .

Давайте расширим пример полной высоты, чтобы он содержал элемент, расположенный внизу справа. 

 <div class="full-height relative"> <div class="absolute pin-bottom-right padding-one"> Text to bottom right </div> </div>

демонстрация

Объединяя более одного класса, мы можем получить требуемый результат в меньшем количестве кода. Если вы хотите расположить внутренний элемент в верхнем правом углу, вы можете использовать pin-top-right вместо pin-bottom-right . Вы могли заметить, что в приведенном выше коде я также добавил еще один вспомогательный класс: класс padding-one гарантирует, что элемент не будет находиться на одном уровне с краем контейнера или области просмотра.

Плавающие элементы

Плавающие элементы влево или вправо могут быть выполнены с использованием left или right классов. Хорошо известный класс clearfix может использоваться в родительском элементе для очистки чисел с плавающей точкой, как показано ниже с помощью родительского селектора Sass : 

 .left { float: left; } .right { float: right; } .clearfix { &:before, &:after { content: ""; display: table; } &:after { clear: both; } }

демонстрация

Выравнивание элементов

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

 .text-left { text-align: left; } .text-right { text-align: right; } .text-center { text-align: center; } .text-just { text-align: justify; } .align-top { vertical-align: top; } .align-bottom { vertical-align: bottom; } .align-middle { vertical-align: middle; }

Классы видимости

Классы видимости управляют видимостью элементов в зависимости от размера экрана, ориентации устройства, сенсорного экрана или других факторов. Они могут пригодиться в адаптивных проектах.

Мы могли бы иметь следующие классы внутри наших медиа-запросов: 

 .hide-on-small { display: none; } .show-in-large { display: block; }

И в нашем HTML: 

 <div class="hide-on-small show-in-large"> <!-- content here... --> </div>

Вышеуказанный элемент будет скрыт на маленьких экранах, но будет виден на больших экранах.

Мы также можем использовать эти классы для управления элементами на сенсорных устройствах: 

 .touch .show-for-touch { display: none; } .touch .hide-for-touch { display: inherit; }

В приведенном выше .touch класс .touch будет .touch из классов, добавленных Modernizr в элемент <html> .

Хороший пример классов видимости — это те, которые есть в Foundation и Bootstrap’s отзывчивые утилиты .

Типография

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

 .bold { font-weight: bold; } .regular { font-weight: normal; } .italic { font-style: italic; } .ell { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .break-word { word-wrap: break-word; } .no-wrap { white-space: nowrap; }

Цвета

Каждое приложение имеет различные руководства и правила бренда, которые мы можем определить в классах, которые по сути «оформляют» наш интерфейс. Это будет включать цвет текста, фоны и многое другое.

Посмотрим, как это можно перевести в код. Сначала давайте определим наши переменные с помощью Sass: 

 $white : #fff; $gray : #2c3e50; $dark-gray : #95a5a6; $dark : #2c3e50; $notice : #3498db; $success : #1abc9c; $alert : #e74c3c;

Затем мы определяем наши вспомогательные классы на основе переменных: 

 // Colors .white { color: $white; } .gray { color: $gray; } .dark-gray { color: $dark-gray; } .notice { color: $notice; } .success { color: $success; } .alert { color: $alert; } // Backgrounds .white-bg { background-color: $white; } .gray-bg { background-color: $gray; } .dark-gray-bg { background-color: $darkgray; } .notice-bg { background-color: $notice; } .success-bg { background-color: $success; } .alert-bg { background-color: $alert; }

Два хороших примера использования цветных и фоновых вспомогательных классов можно найти в проектах Mapbox и Google Web Starter Kit .

Таблица цветов

Другим вариантом использования является компонент уведомления . Давайте посмотрим, как мы можем стилизовать это с помощью фоновых вспомогательных классов. 

 <div class="white p1 mb1 notice-bg">Info</div> <div class="white p1 mb1 success-bg">Success</div> <div class="white p1 mb1 alert-bg">Alert</div>

Оповещения

Списки

Сколько раз вы хотели избавиться от пуль и обивки элемента ul ? Класс под названием list-bare , используемый в inuitcss , может сделать это за вас. 

 .list-bare { padding: 0; list-style: none; }

Границы

Вспомогательные классы могут использоваться для добавления границ к элементу, будь то со всех сторон или с одной стороны. Так что ваш CSS / Sass может выглядеть так: 

 $border-color: #f2f2f2; .border-all { border: 1px solid $border-color; } .border-top { border-top: 1px solid $border-color; } .border-bottom { border-bottom: 1px solid $border-color; } .border-right { border-right: 1px solid $border-color; } .border-left { border-left: 1px solid $border-color; }

Показать значения

Следующие вспомогательные классы дают нам возможность использовать различные значения для свойства display CSS: 

 .inline { display: inline; } .block { display: block; } .inline-block { display: inline-block; } .hide { display: none; } .flex { display: flex; }

Вывод

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

Вы можете проверить все вспомогательные классы из этого поста в новой созданной мной библиотеке css-helpers .

Вы можете учиться и изучать структуру следующих проектов:

Дальнейшее чтение

45
Share: