css методологии от О до Б - v2 · ЗАЧЕМ ВАМ ЭТОТ ДОКЛАД?...

CSS МЕТОДОЛОГИИот О до Б ( Алексей Охрименко ) IPONWEB

1

АЛЕКСЕЙ ОХРИМЕНКО

TWITTER: AI_BOY

setInterval(moveIt)

2

➤ https://telegram.me/angular2 ➤ https://telegram.me/react_js ➤ https://telegram.me/nodejs_ru ➤ https://telegram.me/typescript_ru ➤ https://telegram.me/JSlang

➤ https://github.com/aiboy/awesome-telegram-ru

4

https://telegram.me/angular2

https://telegram.me/react_js

https://telegram.me/nodejs_ru

https://telegram.me/typescript_ru

https://telegram.me/JSlang

https://github.com/aiboy/awesome-telegram-ru

Angular 2 meetuphttps://telegram.me/angular2

5

FACEBOOK - ANGULAR 2 - RU

https://telegram.me/angular2

IPONWEB

6

ЗАЧЕМ ВАМ ЭТОТ ДОКЛАД?

➤ Знаете < 2

8


➤ Знаете < 2 ➤ CSS-модули победили

9


➤ Знаете < 2 ➤ CSS-модули победили ➤ BEM победил

10


➤ Знаете < 2 ➤ CSS-модули победили ➤ BEM победил ➤ CSS препроцессоров достаточно

11


➤ Знаете < 2 ➤ CSS-модули победили ➤ BEM победил ➤ CSS препроцессоров достаточно ➤ CSS-методологии не нужны

12

CSS-МЕТОДОЛОГИИ

13

CSS-МЕТОДОЛОГИИ

КТО КАКИЕ ЗНАЕТ?

14

СКОЛЬКО ИХ ВООБЩЕ?

15

CSS МЕТОДОЛОГИЯ ЭТО …

17

НЕ CSS И НЕ СПОСОБ РЕШЕНИЯ

CSS ПРОБЛЕМ

18

НЕ ВИЗУАЛЬНЫЕ ПАТТЕРНЫ

22

http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/

23


NICOLE SULLIVAN

MEDIA OBJECT


24


НЕ ДИЗАЙН ПАТТЕРНЫ

25

.media { width: 400px; background: skyblue; } .media, .bd { overflow:hidden; } .media .img { float:left; margin-right: 10px; } .media .img img { display:block; }

26

.media { display: flex; align-items: flex-start; } .media-figure { margin-right: 1em; } .media-body { flex: 1; }

27

НЕ ИДЕОЛОГИЯ

28

WET VS DRY

30

WRITE EVERYTHING TWICE

VS

DON’T REPEAT YOURSELF

31

СЕМАНТИЧНАЯ

VS

ФУНКЦИОНАЛЬНАЯ

32

<div class="app"> <div class="feed"></div> <div class="profile"></div> <div class="aside"></div> </div>

.feed { border: 1px solid red; width: 300px; height: 50px; } .profile { border: 1px solid red; width: 300px; height: 50px; } .aside { border: 1px solid red; width: 300px; height: 50px; }

33

СЕМАНТИЧНАЯ ИДЕОЛОГИЯ

<div class="app"> <div class="box"></div> <div class="box"></div> <div class="box"></div> </div>

.box { border: 1px solid red; width: 300px; height: 50px; }

34

ФУНКЦИОНАЛЬНАЯ ИДЕОЛОГИЯ

<div class="app"> <div class="feed"></div> <div class="profile"></div> <div class="aside"></div> </div>

.feed { border: 1px solid red; width: 300px; height: 50px; } .profile { border: 1px solid blue; width: 300px; height: 50px; } .aside { border: 1px solid red; width: 300px; height: 50px; }

35

СЕМАНТИЧНАЯ ИДЕОЛОГИЯ

<div class="app"> <div class="box"></div> <div class="box new"></div> <div class="box"></div> </div>

.box { border: 1px solid red; width: 300px; height: 50px; }

.new { border: 1px solid blue; }

36


CSS ZEN GARDER

http://www.csszengarden.com

37

http://www.csszengarden.com

CSS МЕТОДОЛОГИЯ ЭТО..

➤НЕ CSS И ЭТО НЕ ТОЛЬКО О ПРОБЛЕМАХ CSS

➤НЕ ВИЗУАЛЬНЫЕ ПАТТЕРНЫ ➤НЕ ДИЗАЙН ПАТТЕРНЫ ➤НЕ ИДЕОЛОГИЯ

38

ТАК ЧТО-ЖЕ ТОГДА CSS-МЕТОДОЛОГИЯ?

39

ВСЕГО ЛИШЬ НАБОР ПРАВИЛ

43

ТФЬУ-CSS

44

НЕ ВСЕ ЖЕ ТАК ПРОСТО?

45

ЗА КАЖДЫМ ПРАВИЛОМ ДОЛЖНЫ БЫТЬ

ЖЕЛЕЗНЫЕ АРГУМЕНТЫ

46

ШЕСТЬ РАЗНЫХ CSS

МЕТОДОЛОГИЙ47

3 ТИПА CSS МЕТОДОЛОГИИ

48

#1 - СЕЛЕКТОРОВ50

#2 - ПАПОК и ФАЙЛОВ

51

#3 - ПОЛНАЯ52

ОБЫЧНЫЙ ПОДХОД

<div class="media"> <img class="figure" src="http://placekitten.com/100/100"> <p class="body"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus minus rerum ullam fugit commodi ea officiis! Expedita nostrum illum nobis labore in totam excepturi. </p> </div>

.media { display: flex; align-items: flex-start; width: 400px; background: skyblue; } .media .figure { margin: 1em; } .media .body { flex: 1; }

<div class="next-page"> <div class="media"> <img class="figure" src="http://placekitten.com/100/100"> <p class="body"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus minus rerum ullam fugit commodi ea officiis! Expedita nostrum illum nobis labore in totam excepturi. </p> </div> </div>

.media { display: flex; align-items: flex-start; width: 400px; background: skyblue; } .media .figure { margin: 1em; } .media .body { flex: 1; } .next-page .media { background: red; }

.media .figure { margin: 1em; } .media .body { flex: 1; } .next-page .media { background: red; }

.next-page .media .media { background: skyblue; }

OOCSS

#1 - СЕЛЕКТОРОВ


62

ФЕВРАЛЬ 2009http://www.slideshare.net/stubbornella/object-oriented-css

63

http://www.slideshare.net/stubbornella/object-oriented-css

ПРАВИЛА

➤ Никаких родительских селекторов ➤ Разделение структуры от представления

64

/* structure */.media { display: flex; align-items: flex-start; } .media-figure { margin: 1em; } .media-body { flex: 1; } /* visual */.media-default { background: skyblue; width: 400px; }

<div class="media media-default"> <img class="media-figure" src="http://placekitten.com/100/100"> <p class="media-body"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus minus rerum ullam fugit commodi ea officiis! Expedita nostrum illum nobis labore in totam excepturi. </p> </div>

/* structure */.media { display: flex; align-items: flex-start; } .media-figure { margin: 1em; } .media-body { flex: 1; } /* visual */.media-default { background: skyblue; width: 400px; } .media-special-offer { background: red; width: 400px; }

<div class="media media-special-offer"> <img class="media-figure" src="http://placekitten.com/100/100"> <p class="media-body"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus minus rerum ullam fugit commodi ea officiis! Expedita nostrum illum nobis labore in totam excepturi. </p> </div>

SMACSSФУНКЦИОНАЛЬНАЯ ИДЕОЛОГИЯ

#2 - ФАЙЛЫ и ПАПКИ

71

ОКТЯБРЬ 2011https://smacss.com

http://www.webconfs.com/domain-age.php

72

https://smacss.com

http://www.webconfs.com/domain-age.php

ПРАВИЛА

➤ Base ➤ Layout ➤ Module ➤ State ➤ Theme

73

74

<link rel="stylesheet" href="css/base/normalize.css"> <link rel="stylesheet" href="css/layout/page.css"> <link rel="stylesheet" href="css/module/media.css"> <link rel="stylesheet" href="css/state/media.css"> <link rel="stylesheet" href="css/theme/default.css">

75


76


77


.media { display: flex; align-items: flex-start; } .media-figure { margin: 1em; } .media-body { flex: 1; }

79


.media-disabled { opacity: 0.5; }

81


.media-default { background: skyblue; width: 400px; } .media-special-offer { background: red; width: 400px; }

BEM


СЕМАНТИЧЕСКАЯ ИДЕОЛОГИЯ

84

МАРТ 2009

http://vitaly.harisov.name/article/independent-blocks.html)

ФЕВРАЛЬ 2010

АВГУСТ 2007

Устаканилась

Публичный доступ https://github.com/bem/bem-tools

85

https://github.com/bem/bem-tools

ПРАВИЛА

➤ Базовые примитивы: блок, элемент, модификатор

➤ Независимость блоков ➤ Вложенность элементов блока < 1 ➤ На DOM элементе может быть > 1 блока

➤ «Слойоная» архитектура (layers)86

.MEDIA

.MEDIA__FIGURE

.MEDIA_SPECIAL-OFFER

88

<link rel="stylesheet" href="css/layer-common/i-html/i-html.css"> <link rel="stylesheet" href="css/layer-common/media/media.css"> <link rel="stylesheet" href="css/layer-common/media/__body/media__body.css"> <link rel="stylesheet" href="css/layer-common/media/__figure/media__figure.css"> <link rel="stylesheet" href="css/layer-common/media/_special-offer/media_special-offer.css">

89

<link rel="stylesheet" href="css/layer-common/i-html/i-html.css"> <link rel="stylesheet" href="css/layer-common/media/media.css"> <link rel="stylesheet" href="css/layer-common/media/__body/media__body.css"> <link rel="stylesheet" href="css/layer-common/media/__figure/media__figure.css"> <link rel="stylesheet" href="css/layer-common/media/_special-offer/media_special-offer.css"> <link rel="stylesheet" href="css/layer-theme/media/media.css">

90


91


92


93


.media { display: flex; align-items: flex-start; width: 400px; }

96


.media__body { flex: 1; }

.media__figure { margin: 1em; }

98


99


.media_special-offer { background: red; }

<div class="media"> <img class="media__figure" src="http://placekitten.com/100/100"> <p class="media__body"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus minus rerum ullam fugit commodi ea officiis! Expedita nostrum illum nobis labore in totam excepturi. </p> </div>

<div class="media media_special-offer"> <img class="media__figure" src="http://placekitten.com/100/100"> <p class="media__body"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus minus rerum ullam fugit commodi ea officiis! Expedita nostrum illum nobis labore in totam excepturi. </p> </div>

ATOMIC DESIGN

#2 - ФАЙЛЫ и ПАПКИ


104

МАЙ 2013http://www.slideshare.net/bradfrostweb/atomic-design/14-Tiny_Bootstraps_for_every_clientDave

105

http://www.slideshare.net/bradfrostweb/atomic-design/14-Tiny_Bootstraps_for_every_clientDave

ПРАВИЛА

➤ Atoms ➤ Molecules ➤ Organisms ➤ Templates ➤ Pages

106

107

<link rel="stylesheet" href="css/atoms/normalize.css"> <link rel="stylesheet" href="css/molecules/media-body.css"> <link rel="stylesheet" href="css/molecules/media-figure.css"> <link rel="stylesheet" href="css/organisms/media.css"> <link rel="stylesheet" href="css/templates/template.css"> <link rel="stylesheet" href="css/pages/page.css">

108


.media-body { flex: 1; }

.media-figure { margin: 1em; }

110


.media { display: flex; align-items: flex-start; width: 400px; } .media-default { background: skyblue; } .media-special-offer { background: red; }

112


113


<div class="media media-default"> <img class="media-figure" src="http://placekitten.com/100/100"> <p class="media-body"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus minus rerum ullam fugit commodi ea officiis! Expedita nostrum illum nobis labore in totam excepturi. </p> </div>

<div class="media media-special-offer"> <img class="media-figure" src="http://placekitten.com/100/100"> <p class="media-body"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus minus rerum ullam fugit commodi ea officiis! Expedita nostrum illum nobis labore in totam excepturi. </p> </div>

ATOMIC CSS



117

НОЯБРЬ 2014http://acss.io

118

http://acss.io

ПРАВИЛА

➤ 1 класс селектор на 1 CSS свойство ➤ Значение свойства внутри названия класса

➤ Helpers ( для типичных задач вроде clearfix )

119

.D\(f\) { display: flex; } .AI\(fs\) { align-items: flex-start; } .M\(default\) { margin: 1em; } .F\(1\) { flex: 1; } .W\(400px\) {

} .F\(1\) { flex: 1; } .W\(400px\) { width: 400px; } .Bg\(default\) { background: skyblue; } .Bg\(special-offer\) { background: red; }

<div class="D(f) AI(fs) W(400px) Bg(default)"> <img class="M(default)" src="http://placekitten.com/100/100"> <p class="F(1)"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus minus rerum ullam fugit commodi ea officiis! Expedita nostrum illum nobis labore in totam excepturi. </p> </div>

130

http://acss.io/guides/atomizer.html

http://acss.io/guides/atomizer.html

AXIOMATIC CSS


СЕМАНТИЧЕСКАЯ ИДЕОЛОГИЯ

131

ОКТЯБРЬ 2014https://vimeo.com/101718785

http://alistapart.com/article/axiomatic-css-and-lobotomized-owls

132

https://vimeo.com/101718785


ПРАВИЛА

➤ Без Class селекторов ➤ Максимально используем HTML5 семантику

➤ H1, H2 … nav, article…

133

135

<article> <img src="http://placekitten.com/100/100"> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus minus rerum ullam fugit commodi ea officiis! Expedita nostrum illum nobis labore in totam excepturi. </p> </article>

article { display: flex; align-items: flex-start; width: 400px; background: skyblue; } article > img { margin: 1em; } article > p { flex: 1; }

138

<article> <img src="http://placekitten.com/100/100"> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus minus rerum ullam fugit commodi ea officiis! Expedita nostrum illum nobis labore in totam excepturi. </p> </article>

<article> <img src="http://placekitten.com/100/100"> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus minus rerum ullam fugit commodi ea officiis! Expedita nostrum illum nobis labore in totam excepturi. </p> </article>

article { display: flex; align-items: flex-start; width: 400px; background: skyblue; } article > img { margin: 1em; } article > p { flex: 1; } article + article { margin-top: 20px; }

CSS МЕТОДОЛОГИИ

НУЖНЫ144

BEM ХОРОШ - НО НЕ ПОБЕДИЛ

145

1) Google - не используют БЭМ (на главной странице) 2) Youtube - используют OOCSS 3) Facebook - что-то свое из семейства Functional 4) Baidu.com - используют ID и Tag селекторы :) 5) Yahoo - Atomic CSS ( не пупать с Atomic Design! ) 6) Amazon - свой аналог Atomic CSS 7) Wikipedia - смесь Utility classes и Axiomatic CSS

+ Все сайты на Bootstrap

146

CSS-МОДУЛИ ПОБЕДИЛИ

147

https://github.com/cssinjs/jss-compose

https://github.com/cssinjs/jss-compose

CSS ПРЕПРОЦЕССОРОВ ДОСТАТОЧНО

150

CSS-МЕТОДОЛОГИИ - ЭТО ВАЖНЫЙ, НО ВСЕГО ЛИШЬ ИНСТРУМЕНТ

152

ВЫБИРАЙТЕ ПРАВИЛЬНЫЙ ИНСТРУМЕНТ ДЛЯ ТЕКУЩЕЙ РАБОТЫ

153

THE END

154

АЛЕКСЕЙ ОХРИМЕНКО

TWITTER: AI_BOY

setInterval(moveIt)

http://bit.ly/2amSM76

155

http://bit.ly/2amSM76

css методологии от О до Б - v2 · ЗАЧЕМ ВАМ ЭТОТ ДОКЛАД?...

Documents