Автор оригинала: Colby Fayock.
CSS-In-JS – это все ярость. Но действительно ли это лучший вариант?
Решение проблем вам не нужно решать
Не поймите меня неправильно, CSS-in-js – отличное решение, но это для проблемы, у большинства людей нет. Поддержание ваших компонентов в очень прошележенном подходе абсолютно помогает вещам, как:
- Непреднамеренные побочные эффекты каскадных стилей
- Помощь командам организуют свои правила
- Избегать шага на пальцах друг друга во время разработки
Но те, кто действительно становится только проблемами с большими командами со многими разработчиками и огромной библиотекой компонентов.
Так что вы хотите, чтобы я использовал?
Чтобы начать с слегка более высокой точки зрения, вы можете получить привычку несколько основных идей:
- Установить и следуйте некоторым основным правилам записи
- Используйте инструменты или устанавливать стандарты для организации
- Разработка с методологиями, такими как Бемический
Это устранит любую из этих проблем на меньший проект (или большой) и на самом деле может облегчить жизнь.
Какие CSS-In-JS хороши в …
Помощь большим командам сохранить здравомыслие
Часть того, почему это решение существует, заключается в том, что очень большие команды трудно избегать конфликтов, когда у них есть огромная библиотека для решения. Возможность иметь свой компонент и все, что влияет на него в одну компартную область, помогает людям избежать наступления друг к ногам друг друга и потенциально выкатывать твики, которые непреднамеренно каскадят по всему приложению. Это здорово, но более вероятно, чем нет, вы 1 из нескольких (или одних) работающих над небольшим приложением. Если вы и ваша команда не общаются о некоторых основных правилах и стандартах, я бы поспорил, что у вас есть большие проблемы.
Вид устраняет необходимость изучения CSS (вид)
Некоторые разработчики Mock CSS говорят, что это не реальный код, другие напуганы, это волшебство (не будь, обнимать его). Только беспокоиться о нескольких правилах в одном компонент Помогает поставить ума людей напротив, зная, что это чуть больше JS, которая меняет, как это выглядит немного.
Что оба могут делать?
Перегрузка горячего модуля (HMR)
Хотя некоторые говорят преимущество в CSS-in-js – HMR, вы обнаружите, что это работает нормально с стилями. Иногда он на самом деле работает немного приятнее, если вы работаете над компонентом, который требует рерандера, такого как те, которые с сетевым запросом в качестве зависимости, когда изменения CSS не заставит, что Rerender.
Переменные, глобальные настройки
Если кто-то делает аргумент, что CSS не может этого сделать, это потому, что они некоторое время не обращают внимания. Сасс не только дает это, Это уроженец для современных браузеров Отказ
Инкапсуляция
Да, вам не нужны JS, чтобы сделать это. Добавьте имя класса в элемент верхнего уровня компонента или страницы, гнежите все стили внутри, и у вас есть инкапсуляция.
.page-about {
.header {
background-color: red;
}
}
.navigation {
.button {
background-color: blue;
}
}Переживание
https://stylelint.io/
Намного больше
Честно говоря, возможно, намного больше, что оба делают так же, что вы просто не понимаете.
Какие таблицы стилей и сасс делают лучше …
Совместное использование и настройку правила
SASS позволяет вам настроить переменные, пользовательские функции и Mixins, которые требуют разработки вашего CSS на следующий уровень.
Игнорирование плохих селекторов:
// settings.scss
$color-ultraviolet: #5F4B8B;
// colbys-styles.scss
@import "settings";
.colbys-text-color {
color: $color-ultraviolet
}
.colbys-background-color {
background-color: $color-ultraviolet
}Хотя синтаксис и конфигурация этого, возможно, проще, чем настройка группы конфигураций объекта в JS, это значительно позволяет предоставлять согласованные визуальные впечатления и высыхания вашего кода.
Отзывчивый дизайн
Одна из многих вещей, которые добавляют к роли хорошего инженера переднего конца, обращают внимание на то, как проект будет выглядеть на нескольких устройствах и размерах. В целом, UX – это работа. Разработка с отзывчивым первым мышлением не только облегчает этот процесс, он помогает построить лучший продукт.
Попытка сделать ваши компоненты отзывчивыми в JS означает больше JavaScript и больше слушателей событий. Не только это добавляет сложность, оно попадает на производительность. Мы можем сделать это намного проще с помощью медиа-запросов, запеченных вправо в CSS.
.colbys-sidebar {
width: 100%;
}
// NO EVENT LISTENERS
@media (min-width: 1024px) {
.colbys-sidebar {
width: 25%;
}
}Вместо того, чтобы включить слушателей событий, убедившись, что ваши слушатели мероприятия не зависят от размонтирования, и просто иметь дело с организацией того, что все в «пути React», средства массовой информации запускают по требованию и переворачивают ваши стили по мере необходимости более последовательно Отказ
Меньше сложности ваших компонентов
Возможность сосредоточиться на функциональности и визуализированном выходе позволяет избежать тяги в библиотеках или сложных методах, чтобы по сути, исправлять CSS в вашу JS, не говоря уже о том, чтобы взлом JS или два или три, которые вы используете, чтобы получить его работу в первое место.
// This is an exaggeration
const styles = {
color: blue;
}
if ( whos_favorite === 'Colby' || whos_favorite === 'Lord Commander' ) {
styles.color = 'ultraviolet';
} else if ( whos_favorite === 'The Gary' ) {
styles.color = 'red';
} else if ( whos_favorite === 'Mooncake' ) {
styles.color = 'green';
} else if ( whos_favorite === 'HUE' ) {
styles.color = 'blue';
} else if ( whos_favorite === 'KVN' ) {
styles.color = 'yellow';
}
Представление
Меньше JavaScript всегда победа . Это меньше, что ваш браузер должен загрузить, меньше вашего браузера должен компилировать, что в конечном итоге будет перевести на быстрее скорость страницы. Когда браузер загружает страницу, она пытается максимально оптимизировать HTML и CSS. Да, вы, вероятно, загружаете больше CSS APFFRONT, но больше JS очень дорого, а также с большей вероятностью заставить полную Rerender ;
Многие из маленьких волшебных битов, которые вы делаете с JavaScript, можно сделать с помощью довольно мощных методов анимации CSS, просто просматривайте кодепен немного или проверить что-то вроде Animista Отказ
У меня на самом деле нет никаких номеров в отставке Из нескольких хороших заметок и некоторые Тесты CSS-In-JS Отказ Кто-нибудь сделал на этой работе на этом?
В конце дня делайте то, что эффективно
У каждого есть личные предпочтения, все продуктивны по-другому. Делайте то, что лучше для вас, делайте то, что лучше для вашей команды, и избегайте лечения того, что другие разработчики говорят как догматические права и неправильные.
Если вы являетесь одиноким разработчиком в проекте и хотите практиковать CSS-in-js, чтобы привыкнуть к нему, когда вы в большой команде, идите на это! Если вы находитесь в огромной, огромной команде в Facebook и хотите использовать таблицы стилей, ну, вы можете столкнуться с проблемами, если все не следует по тем же руководящим принципам, но делать то, что лучше для вас и вашей команды.
Единственный способ понять это, это с опытом работы и экспериментами. Играйте с обоими решениями, и выясните, почему вы думаете, что лучше, чем другой. Вы никогда не знаете, где вы попадете после приземления этого концерта в Google или новом стартапе в вашем гараже.
Первоначально опубликовано https://www.colbyfayock.com/2019/07/you-dont-need-css-in-js-why-i-use-stylesheets .
Оригинал: “https://www.freecodecamp.org/news/you-dont-need-css-in-js-why-i-use-stylesheets/”