Fundamentals1. return <button style={styleObject}>
ButtonName</button>
2. return <button className="btn">
ButtonName</button>
2
classnames by JedWatsonvar classNames = require('classnames'),
LeColobok = React.createClass({
render() {
var colobokClass = classNames({
'LeColobok': true,
'LeColobok__good': this.state.isPressed
})
return <button className={colobokClass}>Cancel</button>
01.
02.
03.
04.
05.
06.
07.
08.
3
План1. Штуки для classnames
2. Штуки для inline styles
3. Методологии именования классов
4. BEM mixin
5. Сборка стилей
4
CSS — часть вайшей экосистемыкомпонентов
1. Predictable
2. Reusable
3. Maintainable
4. Scalable
Установка/отсутствие стиля может влиять на поведение
5
CSS Naming1. SMACSS: leColobok class="rus-Colobok is-tasty"
2. suitcss
3. BEM leColobok class="colobok colobok__tasty"
4. BEVIS leColobok class="colobok _tasty_yes"
CSS Modules - сборка
6
BEM это...БЭМ — это жесткий и очень топорный свод правил, который не несет
никакой практической пользы, если не брать в расчет проблемы
устаревшей табличной верстки. БЭМ уродует код и разрушает все
прекрасное, что есть в процессе верстки. Любое соприкосновение с БЭМ
напоминает бессмысленное и утомительное развешивание костылей.
http://habrahabr.ru/users/Fibril/
“7
BEM это...If you follow all of the rules (of BEM), you’ll avoid the single hardest problem
in CSS: Getting your rules to match the elements you want, without them
accidentally matching the elements you don’t.
Philip Walton“
8
Именование стилей1. albburtsev/bem-cn: SMACSS, BEM
2. azproduction/b_: BEM, BEVIS
dfilatov/bem-react не про стили, это гибрид
9
Примеры1. b('leColobok', {escaped: 'from-granpa'}) ->->
'leColobok leColobok_escaped_from-granpa';
2. b('leColobok', 'smile', {size: 'xxl'}) ->->
'leColobok__smile leColobok__smile_size_xxl';
10
CSS Inheritance.fairyTailBeast
magic: 10px
border: 1px solid #eee
.leColobok
@extend .fairyTailBeast
color: #E2E21E
01.
02.
03.
04.
05.
06.
11
Radium Example@Radium
class LeColobok extends React.Component {
render() { return (
<button style={[
colobokStyles.base,
colobokStyles['is-tasty']
]}>
Cancel</button>)}}
01.
02.
03.
04.
05.
06.
07.
08.
14
Беcклассовый подход отвратителен1. Бегство от стандартов
2. Нарушение принципа Single responsibility
3. Поэтому сложнее в переиспользовании
4. Увеличение кода страницы (избыточность)
5. Client side only: vendor prefixes, media queries
6. Конфликт с ReactCSSTransitionGroup
15
CSS/React Principles by Zvooq1. 1 Component = 1 Block
2. CSS in separate file
3. Stylus + PostCSS
4. b_ mixin
5. Миксин знает название компонента
6. Миксин знает state
16
Использование миксина b_ LeColobok = React.createClass({
mixins: [ BEM ],
getInitialState() { return { isGood: true }; },
render() { return <button
className={this.b_('_isGood')}>Cancel</button>
// 'leColobok leColobok_isGood'
}})
01.
02.
03.
04.
05.
06.
07.
17
Еще примеры для b_1. b_([ '_isTasty', '_escapedFromGranpa' ]) ->-> //
this.state === {escapedFromGranpa : false}
'leColobok leColobok_isTasty'
2. b_('-smile_xxl') ->-> 'leColobok-smile leColobok-
smile_xxl'
18
CSS build for React1. Webpack
2. Loaders: post | pre-processors
3. CSS Modules
Илья Кантор выложил отличные скринкасты
21