About Styles for React Components. Talk on November Moscow Tech Meetup, 23/11/2015

1. CSS REACTTALK
Иван Котов, Zvooq.com
November Moscow Tech Meetupimage Kilian Schönberger

2. Fundamentals
1. return <button style={styleObject}>
ButtonName</button>
2. return <button className="btn">
ButtonName</button>
2

3. classnames by JedWatson
var 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

4. План
1. Штуки для classnames
2. Штуки для inline styles
3. Методологии именования классов
4. BEM mixin
5. Сборка стилей
4

5. CSS —часть вайшей экосистемы
компонентов
1. Predictable
2. Reusable
3. Maintainable
4. Scalable
Установка/отсутствие стиля может влиять на поведение
5

6. CSS Naming
1. 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

7. BEM это...
БЭМ — это жесткий и очень топорный свод правил, который не несет
никакой практической пользы, если не брать в расчет проблемы
устаревшей табличной верстки. БЭМ уродует код и разрушает все
прекрасное, что есть в процессе верстки. Любое соприкосновение с БЭМ
напоминает бессмысленное и утомительное развешивание костылей.
http://habrahabr.ru/users/Fibril/
“
7

8. 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

9. Именование стилей
1. albburtsev/bem-cn: SMACSS, BEM
2. azproduction/b_: BEM, BEVIS
dfilatov/bem-react не про стили, это гибрид
9

10. Примеры
1. b('leColobok', {escaped: 'from-granpa'}) ->->
'leColobok leColobok_escaped_from-granpa';
2. b('leColobok', 'smile', {size: 'xxl'}) ->->
'leColobok__smile leColobok__smile_size_xxl';
10

11. CSS Inheritance
.fairyTailBeast
magic: 10px
border: 1px solid #eee
.leColobok
@extend .fairyTailBeast
color: #E2E21E
01.
02.
03.
04.
05.
06.
11

12. Беcклассовый подход
12

13. Radium
оооочень модно
13

14. 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

15. Беcклассовый подход отвратителен
1. Бегство от стандартов
2. Нарушение принципа Single responsibility
3. Поэтому сложнее в переиспользовании
4. Увеличение кода страницы (избыточность)
5. Client side only: vendor prefixes, media queries
6. Конфликт с ReactCSSTransitionGroup
15

16. CSS/React Principles by Zvooq
1. 1 Component = 1 Block
2. CSS in separate file
3. Stylus + PostCSS
4. b_ mixin
5. Миксин знает название компонента
6. Миксин знает state
16

17. Использование миксина 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

18. Еще примеры для b_
1. b_([ '_isTasty', '_escapedFromGranpa' ]) ->-> //
this.state === {escapedFromGranpa : false}
'leColobok leColobok_isTasty'
2. b_('-smile_xxl') ->-> 'leColobok-smile leColobok-
smile_xxl'
18

20. React —банан...
...который поставляется вместе с обезьяной и джунглями впридачу
20

21. CSS build for React
1. Webpack
2. Loaders: post | pre-processors
3. CSS Modules
Илья Кантор выложил отличные скринкасты
21

22. Спасибо!