3 совета по управлению стилями в CSS приложения Angular

От автора: посмотрим правде в глаза: когда мы работаем над интерфейсом, написание CSS — это не то, что нас больше всего волнует. Нам нравится возиться с более серьезными вещами (вы понимаете, о чем я — JavaScript). Большинство приложений, с которыми я сталкивался, и я уверен, что вы тоже, имеют большой беспорядок в области таблицы стилей. Такие проблемы, как дублирование кода, переопределение стилей, отсутствие организации и т. д. — обычная вещь.

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

Создание библиотеки основных компонентов

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

<button appButton>Click</button>
<app-select [options]="[]"></app-select>
<app-accordion>....</app-accordion>

Такую библиотеку можно построить двумя способами; в случае, если приложение уже велико, и у нас есть большое количество компонентов, рекомендуется создать специальную команду, которая будет ее создавать.

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

Используйте служебные классы

Теперь, когда у нас есть библиотека, которая предоставляет нам все компоненты, необходимые для создания новой функции, нам нужно заняться более мелкими вещами. Например, стилизация отображения элементов с помощью flexbox или сетки, добавление полей, отступов и т. д. Чтобы справиться с этим, я рекомендую использовать подход служебных классов — он и быстрый, и чистый. В своих проектах я использую библиотеку CSS Tailwind.

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

Давайте добавим Tailwind в наш проект, используя еще одну аккуратную библиотеку от ngneat. Эта схема добавит CSS Tailwind в приложение Angular.

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

<div class="flex justify-between"> <div class="mr-4"> ... </div>
</div>

В режиме разработки мы загружаем всю библиотеку Tailwind. Но круто то, что в производственном режиме мы активируем PurgeCSS, который сканирует наш проект и объединяет только классы, используемые в нем.

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

Я настоятельно рекомендую изучить Tailwind, так как у него много возможностей. Если вы работаете с VSCode, вы можете использовать этот отличный плагин для IntelliSense:

Или используйте этот плагин для быстрого доступа к документации:

В Webstorm вы также получите автозаполнение из коробки.

Используйте переменные CSS

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

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

:root { --font-family: Helvetica, Arial, Sans-Serif;
} body { --primary-100: #fff; --primary-200: #9f1f12;
} body.dark-theme { --primary-100: #000; --primary-200: #f2f2f2;
} body { background-color: var(--primary-100); color: var(--primary-200); font-family: var(--font-family);
}

Теперь единственное, что нам нужно сделать, это переключить класс dark-theme.

Если вы это пропустили

Вот несколько моих проектов с открытым исходным кодом:

Автор: Netanel Basal

Источник: https://netbasal.com

Редакция: Команда webformyself.