React.js
Как именовать CSS-классы
- В одно слово:
CSS
.wrapper {
margin: 0 auto;
}- Через дефис:
CSS
.hero-section {
margin: 0 auto;
}- Через нижнее подчеркивание:
CSS
.section_container {
margin: 0 auto;
}- Допустимо комбинировать, например, по БЭМ:
CSS
.hero-section__title_main {
margin: 0 auto;
}Как обратиться по селектору CSS-класса в JSX
- В классическом подходе (без использования CSS Modules):
JSX
import './my-styles.css'
export default function HeroSection() {
return (
<div className={'hero-section'}></div>
)
}
- Как к объекту, если применяется CSS Modules. При отсутствии дефисов в имени CSS-класса:
JSX
import styles from './styles.module.css'
export default function HeroSection() {
return (
<div className={styles.hero_section}></div>
)
}
- Как к объекту, если применяется CSS Modules. При наличии дефисов в имени CSS-класса:
JSX
import styles from './styles.module.css'
export default function HeroSection() {
return (
<div className={styles['hero-section']}></div>
)
}