Функциональный CSS: Tailwind CSS

Tailwind - CSS фреймворк для быстрого создания собственных интерфейсов

2019-11-24 dr.Brain

время чтения 3 мин.

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

Содержание

Функциональный CSS - что это?

Функциональный CSS (иногда именуемый как atomic CSS) - практика использования малых, неизменяемых, однозначно именуемых служебных классов, необходимых для создания компонентов.

Различные, готовые к использованию “из коробки” библиотеки классов, такие как Tachyons и, набирающий популярность, Tailwind CSS, позволяют максимально быстро и легко перейти к использованию принципов функционального CSS.

Пример

без tailwind css

Обычно, Вы создаете компонент, добавляете CSS-классы и прикладываете усилия для их объединения, создавая новые или переписывая уже существующие стили для всех элементов в составе компонента.

В нижеприведенном примере мы создали несколько классов и несколько десятков CSS-свойств для достаточно простого компонента. Беда в том, что новые классы и свойства, возможно, пригодятся только для этого компонента.

CSS:

.chat-notification {
    display: flex;
    max-width: 24rem;
    margin: 0 auto;
    padding: 1.5rem;
    border-radius: 0.5rem;
    background-color: #fff;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.chat-notification-logo-wrapper {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
}

.chat-notification-logo {
    height: 3rem;
    width: 3rem;
}

.chat-notification-content {
    margin-left: 1.5rem;
}

.chat-notification-title {
    color: #1a202c;
    font-size: 1.25rem;
    line-height: 1.25;
}
.chat-notification-message {
color: #718096;
font-size: 1rem;
line-height: 1.5;
}

HTML:

<div class="chat-notification">
    <div class="chat-notification-logo-wrapper">
        <img class="chat-notification-logo" src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e2/Echo_chat_icon.svg/1200px-Echo_chat_icon.svg.png" alt="ChitChat Logo">
    </div>
    <div class="chat-notification-content">
        <h4 class="chat-notification-title">Чат</h4>
        <p class="chat-notification-message">Новое сообщение!</p>
    </div>
</div>

Посмотрим на результат:

c tailwind css

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

<div class="max-w-sm mx-auto flex p-6 bg-white rounded-lg shadow-xl">
  <div class="flex-shrink-0">
    <img class="h-12 w-12" src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e2/Echo_chat_icon.svg/1200px-Echo_chat_icon.svg.png" alt="ChitChat Logo">
  </div>
  <div class="ml-6 pt-1">
    <h4 class="text-xl text-gray-900 leading-tight font-bold">Чат</h4>
    <p class="text-base text-gray-600 leading-normal">Новое сообщение!</p>
  </div>
</div>
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">

Вот результат

В целом, функциональный подход в программировании способствует чистоте и предсказуемости кода. Так и функцинальный CSS определяет однозначные “чистые” классы, не меняющие свое поведение в зависимости от контента.

Чем плох обычный подход к написанию CSS?

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

Если Вы используете Tailwind, все вышеперечисленные проблемы отсутствуют

OK, но DOM похож на свалку

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

В любом случае, это лучше, чем использовть огромное количество неясным образом именованных классов.

Как начать?

Если Вы решите использовать CDN, подумайте о том, что все функциональное великолепие Tailwind CSS можно оценить только включив данную библиотеку в свою сборку

<link href=”https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel=”stylesheet”>

Лучшее решение: интегрировать Tailwind в проект.

Например, через npm:

npm install tailwindcss

или yarn:

yarn add tailwindcss

Хорошу поддержку окажет официальное руководство по использованию Tailwind CSS.

Спасибо за внимание.

doctor Brain