Времена изменились, и теперь вы можете писать CSS так | Ерундное новогоднее эссе

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

Большинству фронтенд-разработчиков по-прежнему следует писать CSS следующим образом:

.mock {
    margin: auto;
    font-size: 16px;
    // ...
}
<div class='mock'>mock</div>

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

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

Трудно выбрать имя, и действительно трудно выбрать имя, когда есть много узловых структур. Конечно, мы можем использовать некоторые спецификации или селекторы, чтобы избежать проблем с именами.
Когда вам нужно использовать JS для управления стилем, вам нужно написать еще один класс, особенно в сценах с большим количеством взаимодействий.
Все понимают повторное использование компонентов, но повторное использование стилей встречается редко, что приводит к более избыточному коду.
Глобальное загрязнение, на самом деле, многие инструменты могут помочь нам автоматически решить эту проблему.
Проблема мертвого кода. JS Мы используем встряхивание дерева, чтобы удалить неиспользуемый код и уменьшить размер файла, но как удалить CSS? Особенно когда проект становится больше, всегда будет появляться бесполезный код CSS.
Порядок, в котором вставляются таблицы стилей, влияет на то, как на самом деле работает CSS.
Подождите, я не буду объяснять это по одному. На самом деле, для автора первый и второй блоки — это два самых неудобных момента в разработке, особенно когда я только что написал фронтенд и нужно делать страницы активности/продукта.

В настоящее время в сообществе есть несколько решений CSS, которые могут решить некоторые из перечисленных выше проблем:

Atom CSS
CSS-in-JS
Сочетание двух вышеперечисленных

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

Atom CSS

Во-первых, давайте поговорим о том, что называется Atom CSS: это означает, что класс делает только одну вещь, например:

.m-8 {
    margin: 8px;
}

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

Давайте сначала посмотрим, как выглядит стилизованный HTML, если используется tailwindcss:

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

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

Далее, давайте возьмем tailwindcss в качестве примера, чтобы рассказать о преимуществах и недостатках решений Atom CSS.

Преимущества и недостатки

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

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

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

.class1 {
    font-size: 18px;
    margin: 10px;
}
.class2 {
    font-size: 16px;
    color: red;
    margin: 10px;
}

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

Напишите CSS как компонент. При первом взгляде на официальный сайт tailwindcss вы точно подумаете, что мне надоело набирать столько стилей, чтобы написать стиль в HTML?

<figure class="md:flex bg-gray-100 rounded-xl p-8 md:p-0">
  <img class="w-32 h-32 md:w-48 md:h-auto md:rounded-none rounded-full mx-auto" src="/sarah-dayan.jpg" alt="" width="384" height="512">
  <div class="pt-6 md:p-8 text-center md:text-left space-y-4">
    <blockquote>
      <p class="text-lg font-semibold">
        “Tailwind CSS is the only framework that I've seen scale
        on large teams. It’s easy to customize, adapts to any design,
        and the build size is tiny.”
      </p>
    </blockquote>
    <figcaption class="font-medium">
      <div class="text-cyan-600">
        Sarah Dayan
      </div>
      <div class="text-gray-500">
        Staff Engineer, Algolia
      </div>
    </figcaption>
  </div>
</figure>

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

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

.btn {
    @apply p-8 rounded-xl font-semibold
}

Инструмент эффективности. Правильное использование tailwindcss определенно может повысить эффективность написания макетов, особенно для страниц, которые должны быть адаптивными. Конечно, эта штука на самом деле мёд первого и мышьяк второго.Оценки очень поляризованы.Некоторые думают, что это повышает эффективность, а некоторые думают, что это увеличивает стоимость, или снимает штаны и пукает.

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

// tailwind.config.js
const colors = require('tailwindcss/colors')

module.exports = {
  theme: {
    screens: {
      sm: '480px',
      md: '768px',
      lg: '976px',
      xl: '1440px',
    },
    colors: {
      gray: colors.coolGray,
      blue: colors.lightBlue,
      red: colors.rose,
      pink: colors.fuchsia,
    },
    fontFamily: {
      sans: ['Graphik', 'sans-serif'],
      serif: ['Merriweather', 'serif'],
    },
    extend: {
      spacing: {
        '128': '32rem',
        '144': '36rem',
      },
      borderRadius: {
        '4xl': '2rem',
      }
    }
  }
}

Выше приведен файл конфигурации темы tailwindcss, вы можете настроить его в соответствии с визуальными требованиями. Например, сегодняшнее видение считает, что размер экрана lg должен быть976px, через некоторое время я чувствую, что его нужно изменить на1000px. Для разработчиков нам нужно только изменять одну строку кода, чтобы вступить в силу глобально, что очень удобно.

Но предположим, что правила маржи, первоначально определенные видением, таковы:

// tailwind.config.js
module.exports = {
  theme: {
    spacing: {
      px: '1px',
      0: '0',
      0.5: '0.125rem',
      1: '0.25rem',
      1.5: '0.375rem',
      2: '0.5rem',
      2.5: '0.625rem',
      3: '0.75rem',
      3.5: '0.875rem',
      4: '1rem',
      5: '1.25rem',
      6: '1.5rem',
      7: '1.75rem',
      8: '2rem',
      // ...
    },
  }
}

Теперь нам нужно поставить6заменить1.6rem, но это правило должно действовать только на некоторые компоненты, как нам нужно изменить стиль в это время? добавить одинspacingА потом заменять нужные места по одному?

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

Вернемся к проблеме традиционного CSS, на самом деле, tailwindcss тоже частично решил ее, но есть еще нерешенные моменты, такие как:

Проблема мертвого кода не решена
Порядок вставки таблиц стилей по-прежнему имеет значение

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

Для Atom CSS мы не должны отрицать его преимущества, но есть ли способ получить его преимущества, максимально избегая его недостатков? Ответ — да, но я хочу поговорить о CSS-in-JS, прежде чем перейти к ответу.

CSS-in-JS

Суть CSS-in-JS (далее аббревиатура CIJ) заключается в написании CSS на JS, что также является спорным техническим решением.

В этой области есть две популярные библиотеки: styled-components (называемая ниже sc) и Emotion. Автор использует sc уже больше года, чтобы вкратце рассказать о его преимуществах и недостатках.

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

const Button = styled.a`
  display: inline-block;

  ${props => props.primary && css`
    background: white;
    color: black;
  `}
`
render(
  <div>
    <Button
      href="https://github.com/styled-components/styled-components"
      target="_blank"
      rel="noopener"
      primary
    >
      GitHub
    </Button>

    <Button as={Link} href="/docs">
      Documentation
    </Button>
  </div>
)

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

Кроме того, sc окончательно не генерирует встроенные стили, а помогает нам вставлятьstyleЭтикетка.

Преимущества и недостатки

Автор использует sc уже больше года, и я чувствую, что это решение очень благоухает для React. И это решает некоторые моменты традиционного написания CSS, которые я ненавижу, поэтому описание плюсов и минусов будет немного субъективным.

Во-первых, решение CSS-in-JS не только позволяет нам в полной мере использовать функции CSS, но и расширяет некоторые области применения. Например, в селекторе мы можем писать стили, выбирая компоненты в sc, следующим образом:

const Button = styled.a`
  ${Icon} {
    color: green;
  }
`

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

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

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

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

Еще один момент — загрузка по запросу. Поскольку мы пишем CSS через JS, и в основном используем разделение кода для упаковки на этом этапе, мы можем добиться загрузки файлов CSS по запросу, а не загружать их все сразу традиционным способом (конечно, это можно оптимизировать, но не очень удобно).

Поговорив о преимуществах, поговорим о недостатках.

Первый недостаток очевиден, и есть стоимость обучения.Конечно, автор считает, что кривая обучения все еще плоская.

Стоимость времени выполнения, сам sc имеет размер файла, и ему также необходимо динамически генерировать CSS, поэтому должна быть потеря производительности. Чем больше проект, тем больше влияние.Если ваш проект предъявляет высокие требования к производительности, вам следует осторожно его использовать. Кроме того, поскольку CSS генерируется динамически, файлы CSS нельзя кэшировать, как в традиционном CSS.

Повторное использование кода ничем не отличается от традиционного способа написания CSS.

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

Atom CSS плюс CSS-in-JS Stitcher

Прочитав вышеизложенное, если вы считаете, что оба варианта хороши, вы можете понятьtwin.macro, эта библиотека (и другие конкурирующие продукты) объединяет эти два решения.

import 'twin.macro'

const Input = () => <input tw="border hover:border-black" />
const Input = tw.input`border hover:border-black`

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

Решение CSS-in-JS для автоматического создания Atom CSS

Предположим, я не только хочу использовать CSS-in-JS, но и хочу интегрировать Atom CSS, но не хочу запоминать/писать много имен классов, смогу ли я реализовать эту идею?

Ответ положительный. Используйте метод времени выполнения для извлечения единого стиля и, наконец, осознайте, что, хотя мы написали CSS-in-JS, окончательное представление — это внешний вид Atom CSS.

кstyletronНапример, код во время разработки выглядит так:

import { styled } from "styletron-react";

export default () => {
  // Create a styled component by passing
  // an element name and a style object
  const Anchor = styled("a", {
    fontSize: "20px",
    color: "red"
  });
  return <Anchor href="/getting-started">Start!</Anchor>;
};

При фактической компиляции это выглядит так:

<html>
  <head>
    <style>
      .foo {
        font-size: 20px;
      }
      .bar {
        color: red;
      }
    </style>
  </head>
  <body>
    <a href="/getting-started" class="foo bar">Start!</a>
  </body>
</html>

Таким образом, вы можете пользоваться преимуществами двух схем. Тем не менее, автор схемы этого типа нашел несколько конкурирующих продуктов, и я чувствую, что она не так популярна, как первые две схемы, поэтому ее может понять каждый. Кроме того, стоимость выполнения этого метода должна быть больше.Может быть, его можно предварительно скомпилировать локально с помощью инструмента упаковки (незрелая идея, не говорите неправильно)?

Суммировать

Сказав так много решений, у читателей могут возникнуть вопросы, так что же мне использовать? Здесь я выражаю свои мысли.

Прежде всего, для sc автор считает, что это очень ароматно, и его нередко используют в самых разных проектах.Конечно, мы также можем написать общие стили с помощью Atom CSS.

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

Вы также можете поделиться своим мнением.

Эта статья синхронно обновляется в публичном аккаунте«Передняя часть — это весело», добро пожаловать, чтобы следовать.