Css style js: Стили и классы

React — пишем CSS в Javascript

Каждый фронтендщик каждый день пишет CSS. А CSS, как известно имеет много проблем, которые хотелось бы решить.

Проблема №1: Все стили в CSS глобальные. Если вы обьявили класс .container с какими то свойствами и Петя завтра сделал на вашем проекте тоже самое, то какие стили применятся? Ваши или Петины? Естественно, что глобальные стили это плохо и люди придумывают костыли в виде BEMa, например. Кто не работал с BEM — это когда вы создаете какой-то класс например .authentication и все стили дочерних классов вкладываете внутрь с префиксом authentication. Получается такой себе уникальный компонент, который можно реюзать. Это большой костыль, который еще и подают в виде методологии, которую нужно изучать. Все стили с BEM так и остаются глобальными и их можно переопределить. Мы же хотим писать классы и не думать о том, что они могут повториться, так как они должны быть уникальные.

Проблема №2: Мы имеем елемент у которого прописаны какие-то стили.

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

Проблема №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.

В этом нет ничего плохого, так как он просто сделан для перекрытия css стилей, но давайте его все таки уберем, так как у нас новый проект и нам он не нужен

Для этого просто вместо импорта из 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'
}

В браузере мы видим, что ширина и высота квадрата изменились. Давайте посмотрим на стили. Так как все стили у нас генерируются, то в браузере мы видим только результирующие стили. То есть ширина и высота задается только 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