CSS React Talk

CSS REACT TALK

Иван Котов, Zvooq.com

November Moscow Tech Meetupimage Kilian Schönberger

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

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

12

Radium

оооочень модно

13

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

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

20

CSS build for React1. Webpack

2. Loaders: post | pre-processors

3. CSS Modules

Илья Кантор выложил отличные скринкасты

21

Спасибо!