От автора: я хорошо помню момент, когда я впервые понял всю силу utility-first разработки CSS. Это было не так давно. Мы с моей командой работали над реализацией дизайна Sketch в HTML / CSS с использованием Bootstrap 4.
Мы только что перешли с Bootstrap 3 на 4, и один из членов команды начал использовать в компоненте, над которым работал, странно выглядящие классы CSS. Сначала я не мог понять, что он делает. Но чем больше мы смотрели на созданный им HTML, тем больше понимали элегантность этого подхода.
Мы почти сразу перешли на этот новый подход во всех наших проектах. Лишь несколько недель спустя я узнал, что у этого подхода есть название: Utility-first CSS.
Сегодня я полностью убежден, что на данный момент это самый быстрый, надежный и не требующий обслуживания способ создания полностью адаптивных веб-приложений. А теперь я хочу показать вам, почему!
Основы
Utility-first CSS ориентирован на то, какие классы CSS вы создаете и что они делают. Вместо того, чтобы называть классы семантически, мы будем использовать несемантический способ. Потому что именовать вещи сложно; может быть, это самая сложная вещь в программировании вообще. Найти подходящее имя для компонента, его элементов и модификаторов сложно. Такие методологии, как BEM, действительно помогают, особенно в больших командах, но окончательно ничего не решают. И не каждый может быть специалистом по BEM.
Но тут на помощь приходит Utility-first CSS.
Начнем с мелочей
Хорошей отправной точкой являются вспомогательные классы для таких вещей, как поля, отступы, тени и т. д. Они просты в использовании и оказывают большое влияние на дизайн. Большинство этих классов говорят сами за себя, поэтому я воздержусь от предоставления вам длинных документов, но объясню, почему вы должны их использовать.
Отступы и поля
У нас есть 4 стороны: сверху, справа, снизу и слева. Помимо стороны, мы также хотим настроить размер свойства. Bootstrap 4 использует по умолчанию диапазон от 0 до 5, чтобы установить размер. Размер будет умножен на переменную Sass $spacer. Вы можете добавить дополнительные классы для других отступов, скомпилировав Bootstrap SCSS самостоятельно.
Теперь, как это использовать? Легко!
.{property}{side}-{size}Например:
.mt-5 для margin-top: 3rem
.pb-3 для padding-bottom: 1rem
.px-2 для padding-left и padding-right: 0.5rem
Другие фреймворки могут иметь более широкие диапазоны или иногда значения в пикселях. Классы могут быть объединены с аббревиатурами контрольных точек для ситуаций, когда вам нужны меньшие или большие значения для экранов мобильных устройств.
Я уверен, что эти классы вы будете использовать чаще всего. И довольно разумно использовать их, когда это возможно. Давайте рассмотрим этот пример:
Типичная таблица прайсов, созданная с помощью карточного компонента Bootstrap 4
<div class="card"> <div class="card-body"> ... </div> </div>
Итак, мы использовали стандартный компонент карточки Bootstrap. Мы настроили внешний вид и вставили свой контент. Но теперь вы хотите повторно использовать компонент карточки следующим образом:
Тот же компонент карточки, но с большим отступом
В старые добрые времена вы бы создали новый класс CSS, например .pricing-table или .my-other-card, чтобы добавить или удалить требуемый отступ. Но для чего? Это намного проще:
<div class="card"> <div class="card-body p-5"> ... </div> </div>
Практическое правило. Используйте вспомогательные классы, когда отступы или поля являются лишь вопросом личных предпочтений или контекста использования. И добавьте свойство в класс, например, .pricing-list, когда дизайн не работает с другим размером или когда его абсолютно запрещено изменять. Таким образом, вы получаете многократно используемые компоненты.
Тексты
Таким образом, после длинного раздела о полях и отступах мы будем более краткими. Я думаю, что следующие классы полностью самоочевидны:
<p class="text-justify">I'm justified.</p> <p class="text-left">You've left me.</p> <p class="text-center">I'm centered.</p> <p class="text-right">I'm always right.</p> <p class="text-lowercase">Unfortunately I'm low.</p> <p class="text-uppercase">But now I'm UPSET!</p> <p class="text-capitalize">I'm capitalized, no matter what you do.</p> <p class="font-weight-bold">Bold text.</p> <p class="font-weight-bolder">Bolder weight text (relative to the parent element).</p> <p class="font-weight-normal">Normal weight text.</p> <p class="font-weight-light">Light weight text.</p> <p class="font-weight-lighter">Lighter weight text (relative to the parent element).</p> <p class="font-italic">Italic text.</p> <p class="text-wrap" style="width: 50px">I'm a (w)rapper.</p> <p class="text-nowrap" style="width: 50px">I never wrap.</p>
Вы можете комбинировать классы выравнивания текста с адаптивностью:
<p class="text-sm-justify">I'm justified.</p> <p class="text-md-left">You've left me.</p> <p class="text-lg-center">I'm centered.</p> <p class="text-xl-right">I'm always right.</p>
Менее очевидные, но очень элегантные вещи:
<p class="text-truncate">I'm getting ellipsis when I become too long</p> <p class="text-break">IWon'tDestroyYourComponents'Layout,Promise!</p> <a class="text-reset text-decoration-none">I don't look like a link, but like my parent.</a>
Цвета
Традиционно в Bootstrap 4 у нас есть 9 цветов:
primary
secondary
success
danger
warning
info
light
dark
white
Но список может быть длиннее, когда вы настраиваете Bootstrap с собственным набором цветов. И для этих цветов у вас, конечно, есть полезные классы!
<span class="text-primary">My text color is primary.</span> <div class="bg-success text-light">My background is success and my text is light.</div>
Тени
Вы хотите быстро добавить тень для одного из элементов? Легко:
<div class="shadow-none">This removes a default shadow.</div> <div class="shadow-sm">A small shadow.</div> <div class="shadow">A normal shadow.</div> <div class="shadow-lg">A slightly bigger shadow.</div>
Вспомогательные классы для сетки, flexbox и адаптивности
Сетка
Технически идея сетки — это в определенном роде ранняя стадия Utility-first CSS. Вместо того, чтобы называть свой компонент .super-fancy-component и задавать для него width: 33.3333333% , вы просто оборачиваете его в .col-4.
Я не собираюсь объяснять вам всю концепцию сетки, потому что вы уже знаете это (по крайней мере, я на это надеюсь), и это будет скучно.
Вместо этого мы напрямую переходим к более интересным вещам.
Flexbox
На мой взгляд, вспомогательные классы flexbox — самые мощные. Почти все мы используем какую-то сетку. Но сетки в основном предназначены для позиционирования и определения размеров компонентов, а не самих компонентов.
Иногда вам просто нужно выровнять группу кнопок рядом с текстом, и текст должен растягиваться и занимать как можно больше места, не перемещая кнопки на следующую строку. Это один из самых простых примеров:
Простой .ml-auto всегда лучше, чем вводить новый класс.
<div class="card"> <div class="card-header"> <h4 class="card-header-title">Card title</h4> <div class="ml-auto flex-grow-0"> <button class="btn btn-success">Save</button> </div> </div> <div class="card-body"> <p class="card-text"> ... </p> </div> </div>
Зачем вам вводить новый класс, например .card-header-buttons, когда достаточно простого .ml-auto.flex-grow-0? Конечно, вам все равно нужно знать все о flexbox. Я воздержусь от перечисления каждого вспомогательного класса, потому что нет ничего лучше, чем сама документация Bootstrap.
Просто для вашего сведения, у нас есть такие классы, как .flex-grow-1 | .flex-grow-0 | .justify-content-center | .align-items-stretch | .d-flex. Вы поняли, как это работает…
Адаптивность
Конечно, самые полезные классы доступны в адаптивных вариантах. Я уже упоминал об этом в некоторых моментах, но повторю для ясности:
Часто вы можете объединять служебные классы с сокращениями контрольных точек. Таким образом, текст можно выровнять по левому краю на настольных компьютерах и центрировать на экранах мобильных устройств. Когда вы пытаетесь создать собственные служебные классы с помощью SCSS, вы должны подумать об этом с самого начала.
Заключение
Независимо от того, используете ли вы какие-то отличные фреймворки, такие как Bootstrap 4, Tailwind CSS или другие, вы всегда должны искать возможность использованию полезных классов. Это облегчит вашу жизнь и повысит стабильность проекта.
Но даже когда вы используете другие фреймворки, такие как Foundation или пользовательский CSS, вы можете расширить их собственными служебными классами. Ввести некоторые переменные SCSS и создавать кучу служебных классов не сложно, но это сэкономит вам и вашим коллегам много времени.
Автор: Sascha Wolff
Источник: https://blog.usejournal.com
Редакция: Команда webformyself.