О CSS.

Самое мрачное из темных искусств.

Конечно, вы можете выучить C ++ и полностью опустошить память вашего компьютера. Или вы можете изучить что-то вроде KaliLinux и стать хакером 1337 как что-то из мистера Робота.

Но на самом деле самое тяжелое, самое злое вот что:

Верно. В мире программно сгенерированных веб-сайтов с расширенными фреймворками, отображающими массивы объектов, CSV и JSON API для создания страниц, было бы очень хорошо, если бы мы могли также программно создавать стиль.

И, конечно, ТЕХНИЧЕСКИ можем. Используя CSS (каскадные таблицы стилей), мы можем назначать определенные атрибуты стиля именам классов HTML, а затем с помощью JavaScript мы можем назначать эти имена классов при рендеринге элементов в объектной модели документа или DOM.

Но что, если вы хотите, чтобы ссылки, формы или какие-либо элементы на разных страницах выглядели по-разному? Или хотите стили в разных местах? Или что, если вы не хотите возиться с миллионом разных имен классов?

Должен быть вариант! И я представлю вам не одну, не две, а ТРИ альтернативы ванильному CSS в ваших проектах на React и ЗА ПРЕДЕЛАМИ!

ВАРИАНТ 1. SCSS, также известный как SASS

Вот первый пример, очень популярная альтернатива CSS, SaSS.

SaSS великолепен! Если вы сравните этот пример с нашим предыдущим примером в верхней части сайта, там мы выбираем все наши ссылки или ‹a› элементы в пределах нашей «.navbar» класс. Это нормальный синтаксис, но он немного повторяется. А как насчет заголовка на панели навигации или обычного текста? В стандартном CSS каждый селектор должен быть отдельным незаметным объектом. Однако с помощью SaSS мы можем создавать вложенные объекты для нашего CSS, которые больше напоминают структуру наших компонентов в такой среде, как React или Angular.

Как вы можете видеть в приведенном выше примере, у нас есть как простой CSS для класса «.post», так и CSS для ссылок в сообщении, все в то же самое место.

Это не только удобно для написания, но и для редактирования! Теперь в любое время, когда я хочу выполнить любой элемент в классе «.post», я точно знаю, куда перейти, чтобы изменить элемент.

SASS также совместим со МНОГИМИ интерфейсными фреймворками и даже поддерживает пользовательские переменные! И обычно реализовать это так же просто, как изменить суффикс вашего файла с «.css» на «.scss». Престо!

Это отличное и (на мой взгляд) необходимое обновление для Vanilla CSS.

Только не путайте это с Саасом. ;)

Вариант 2. Модули CSS / SaSS-

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

перетекание элементов CSS в другие части вашего сайта - огромная проблема для CSS в целом, которая решается с помощью Модулей CSS!

Изменив имя файла CSS или SCSS на «.module.css», вы можете создать CSS, который влияет только на ту часть вашего приложения, которая вам тоже нужна. Взгляните на это!

Игнорируя на мгновение некоторые из классных запросов graphQL, которые я выполняю (см. Мой предыдущий блог, почему doncha), вы можете увидеть, что я импортировал свой модуль CSS как переменную headerStyles и что Классы header и navItem вставляются непосредственно в элемент с помощью свойства className в React.

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

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

Вариант 3. Стилизованные компоненты

Наконец, в качестве отличного варианта для React, самого популярного интерфейсного фреймворка, есть мой любимый способ стилизации: стилизованные компоненты!

Используя React и синтаксис ES6, вы можете избежать необходимости в селекторах на основе имени класса и просто создать компонент, который выглядит так, как вы хотите, выбрав элемент HTML / JSX, как ссылки a, на которые мы смотрели. все время, добавляя его с помощью стиля, а затем добавляя CSS непосредственно в компонент, используя строку литерала шаблона.

В результате получается компонент React, который можно использовать в любом месте приложения и давать любые свойства, которые вы обычно предоставляете этому элементу, как в случае ссылки «a». , вы можете дать ему опору «href» и такие вещи, как «цель».

Но это не все! Вы даже можете создавать стилизованные версии компонентов, которые вы уже объявили, или даже компоненты из таких библиотек, как Semantic!

Вы даже можете создать div «Wrapper» для создания эффектов «зависания» для вашего стиля без дальнейшего доступа к файлу CSS!

Все это относится к этому забавному сайту-примерам, который я сделал для фанк-битов. Зацените, если у вас есть время! Стилизованные компоненты действительно классные.

Итак, это все! Эти методы - ответы на мои кошмары о CSS.

CSS, я все еще тебя ненавижу.

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

А еще вот собака.

Это щенок круглого лабрадуделя Хьюго. Он бесконечный круг. Нет начала. Нет конца. Есть только пух. Отныне и навеки.

Пусть ваш день и ваша альтернатива CSS всегда будут беспорядочными.

-ник