Почему я пишу CSS на JavaScript

внешний интерфейс JavaScript Программа перевода самородков CSS
Почему я пишу CSS на JavaScript

Я не разрабатывал веб-приложение в течение трех лет.cssдокумент. Вместо этого я написал весь CSS на JavaScript.

Я знаю, о чем вы думаете: «Зачем кому-то писать CSS на JavaScript?!» Я отвечу на этот вопрос в этой статье.

Как выглядит CSS-in-JS?

Разработчики создалиРазличные стили CSS-in-JS. Безусловно, самый популярный из них, который я разработал совместно с другими, называетсяstyled-componentsбиблиотека с более чем 20 000 звезд на GitHub.

Вот пример его использования с React:

import styled from 'styled-components'

const Title = styled.h1`
  color: palevioletred;
  font-size: 18px;
`

const App = () => (
  <Title>Hello World!</Title>
)

Это отобразит шрифт светлой фуксии с размером шрифта 18 пикселей в DOM.<h1>:

Почему я люблю CSS-in-JS?

в основномCSS-in-JS повышает мою уверенность. Я могу добавлять, изменять и удалять CSS без каких-либо непредвиденных последствий. Мои изменения в стилях компонентов больше ни на что не влияют. Если я удаляю компонент, я также удаляю его CSS. Больше неТаблицы стилей, которые только увеличиваются, но никогда не уменьшаются! ✨

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

Простота обслуживания: больше не нужно искать компоненты, влияющие на CSS.

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

С CSS-in-JS мы автоматически избегаем распространенных ошибок в CSS, таких как конфликты имен классов и войны специфичности. Это поддерживает чистоту нашей кодовой базы и ускоряет разработку. 😍

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

Что касается производительности, библиотека CSS-in-JS отслеживает компоненты, которые я использую на странице, и только внедряет их стили в DOM. Хотя мой.jsПакет немного больше, но мои пользователи загружают наименьший возможный допустимый контент CSS и избегают необходимости.cssДополнительные сетевые запросы на файлы.

Это приводит к немного большему времени взаимодействия, но первое действительное розыгрыш происходит намного быстрее! 🏎💨

высокая производительность: отправлять пользователю только важные CSS для быстрой первой прорисовки.

Я также могу основываться на разных состояниях (variant="primary" vs variant="secondary") или глобальные темы, чтобы легко стилизовать компоненты. Когда я динамически изменяю этот контекст, компонент автоматически применяет правильные стили. 💅

Динамические стили: стиль компонента на основе глобальной темы или различных состояний.

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

Я знаю, что вы думаете: «Макс, вы также можете получить эти преимущества с помощью других инструментов, тщательного процесса или продолжительного обучения. Что делает CSS-in-JS особенным?»

CSS-in-JS объединяет все эти преимущества в одном удобном пакете и реализует их. это приводит меня кключ к успеху: Легко поступить правильно, трудно (или даже невозможно) поступить неправильно.

Кто использует CSS-in-JS?

Тысячи компаний используют CSS-in-JS в производстве, в том числеReddit,Patreon,Target, Atlassian,Vogue,GitHub,Coinbaseи т.п. (включая этот сайт)

Подходит ли вам CSS-in-JS?

Если вы используете фреймворк JavaScript для создания веб-приложений с компонентами, тогда вам может подойти CSS-in-JS. Особенно все в вашей команде понимают основы JavaScript.

Если вы не знаете, с чего начать, я бы порекомендовал вам попробовать CSS-in-JS и убедиться, насколько он хорош! ✌️

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

Программа перевода самородковэто сообщество, которое переводит высококачественные технические статьи из Интернета сНаггетсДелитесь статьями на английском языке на . Охват контентаAndroid,iOS,внешний интерфейс,задняя часть,блокчейн,товар,дизайн,искусственный интеллектЕсли вы хотите видеть более качественные переводы, пожалуйста, продолжайте обращать вниманиеПрограмма перевода самородков,официальный Вейбо,Знай колонку.

Категории