React — пишем CSS в Javascript
Каждый фронтендщик каждый день пишет CSS. А CSS, как известно имеет много проблем, которые хотелось бы решить.
Проблема №1: Все стили в CSS глобальные. Если вы обьявили класс .container с какими то свойствами и Петя завтра сделал на вашем проекте тоже самое, то какие стили применятся? Ваши или Петины? Естественно, что глобальные стили это плохо и люди придумывают костыли в виде BEMa, например. Кто не работал с BEM — это когда вы создаете какой-то класс например .authentication и все стили дочерних классов вкладываете внутрь с префиксом authentication. Получается такой себе уникальный компонент, который можно реюзать. Это большой костыль, который еще и подают в виде методологии, которую нужно изучать. Все стили с BEM так и остаются глобальными и их можно переопределить. Мы же хотим писать классы и не думать о том, что они могут повториться, так как они должны быть уникальные.
Проблема №2: Мы имеем елемент у которого прописаны какие-то стили.
Проблема №3: Мы хотим избавиться от important раз и навсегда.
Есть ли у нас кроссбраузерное решение этой проблемы? Конечно есть. Существует масса библиотек, где вы можете писать стили в javascript и они будут транспайлится либо в инлайн стили, либо в обычный css.
Я использую библиотеку aphrodite, которую создали в Khan Academy и которая отлично работает как без реакта так и с react.
Итак у меня проект, который я сгенерировал с помощью create-react-app.
Давайте установим aphrodite.
npm i --save aphrodite
Теперь импортируем функцию css из aphrodite.
import { css } from 'aphrodite';
Все наши стили компонента App мы будем держать в файле AppStyles. Давай импортируем StyleSheet и добавим класс container.
import { StyleSheet } from 'aphrodite';
export default StyleSheet.create({
container: {
background: '#bfbea7'
}
})
Все стили, которые пишуться через тире будут писаться camelCase, а все значения строками. Как теперь использовать этот класс container в App компоненте?
<div className={css(styles.container)}>
Our App
</div>
Мы просто в className передаем функцию css с параметром класса, который хотим применить.
Давайте посмотрим в браузер что у нас вышло. Как мы видим, наши стили применились. Наш контейнер теперь уникальный так как к нему добавился сгенерированный постфикс. Теперь даже если в другом месте кто-то использует класс container, то он тоже будет уникальный. Но почему же наш стиль написан с important? Потому что для более легкого перехода на aphrodite с проекта, который написан на обычном css все свойства добавляются автоматом с important.
Для этого просто вместо импорта из aphrodite будем импортить из aphrodite/no-important
import { css } from 'aphrodite/no-important';
import { StyleSheet } from 'aphrodite/no-important';
Как мы видим, important убрался. Все стили, которые мы пишем добавляются в head, но без пробелов, чтобы страница загружалась быстрее.
Что еще нам дает aphrodite? Например autoprefixer. Давайте попробуем. Давайте нашему классу container добавим display:flex
export default StyleSheet.create({
container: {
background: '#bfbea7',
display: 'flex'
}
})
В браузере мы видим, что стили сразу сгенерировались с префиксами для всех браузеров.
Что же по по поводу реюза классов без проблем, которые мы имеем в CSS? Давайте создадим черный квадрат, который мы будем реюзать в разных местах с разными размерами.
Давайте создадим файл squareStyles, который будет нашим шаред классом.
export const blackSquare = {
background: 'black',
width: '100px',
height: '100px'
borderRadius: '3px'
};
Это обычный обьект с стилями. Ничего больше. Даже aphrodite мы не применяли. Теперь давайте выведем его в App.
<div className={css(styles.square)}/>
Мы просто добавили еще один класс из стилей App.
Теперь давайте импортируем blackSquare в стили App и подмешаем все стили из blackSquare с помощью spread из ES7.
import { StyleSheet } from 'aphrodite/no-important';
import { blackSquare } from './squareStyles';
export default StyleSheet.create({
container: {
background: '#bfbea7',
display: 'flex'
},
square: {
...blackSquare
}
})
Если мы посмотрим в браузер, то у нас вывелся черный квадрат. Теперь представим, что в всех местах он нам нужен 100×100, а именно в App 50×50.
Давайте просто перекроем стили в square.
square: {
.
..blackSquare,
width: '50px',
height: '50px'
}
..blackSquare,
width: '50px',
height: '50px'
}
В браузере мы видим, что ширина и высота квадрата изменились. Давайте посмотрим на стили. Так как все стили у нас генерируются, то в браузере мы видим только результирующие стили. То есть ширина и высота задается только 1 раз. Никаких перекрытий стили по 20 раз с разным весом селекторов. Только один уникальный стиль.
Итак в этом уроке мы разобрали, почему писать css в javascript лучше и проще. Вам не нужно думать, что стили будут не уникальные или думать как перекрыть стили. Вы также никогда не будете писать important.
Если у вас возникли какие-то вопросы или комментарии, пишите их прямо под этим видео.
Стиль элемента HTML DOM Свойство
❮ Назад ❮ Ссылка на объект элемента Далее ❯
Примеры
Изменить цвет «myh2»:
document.getElementById(«myh2»).style.color = «red»;
Попробуйте сами »
Получите значение верхней границы «myP»:
let value = document.
getElementById(«myP»).style.borderTop;
Попробуйте сами »
Определение и использование
Свойство style возвращает значения атрибута стиля элемента.
Свойство стиля возвращает объект CSSStyleDeclaration .
Объект CSSStyleDeclaration содержит все свойства встроенных стилей для элемента.
Он не содержит никаких свойств стиля, установленных в разделе
Примечание 1
Вы не можете установить такой стиль:
element.style = "color:red";
Вы должны использовать такое свойство CSS:
element.style.backgroundColor = "red";
Попробуйте сами »
Примечание 2
Синтаксис JavaScript немного отличается от синтаксиса CSS:
backgroundColor / background-color.
См. наш полный справочник по объектам стилей.
Примечание 3
Используйте это свойство стиля вместо метода setAttribute(),
чтобы предотвратить перезапись других свойств в атрибуте стиля.
См. также:
Учебное пособие по CSS
Справочник по CSS
Объект стиля
Тег HTML