Поговорим о верстке: Архитектура

Видео — https://youtu.be/Updm5lqdhN8

Transcript

1. Поговорим о верстке: Архитектура.* Корнаков Артур @fliptheweb aviasales.ru * доклад так же известен под кодовым названием «семинар по верстке»
2. Я хреново верстаю Верстка — это всего лишь правильная расстановка блоков и их адаптация под разные условия (устройства, вьюпорт, браузер и пр.) “ ”
3. Оформление Архитектура
4. Наследование, специфичность и каскад
5. Наследование ul { border: 4px solid #4fb2ff; color: #ff7019; } li { background: #e9e9e9; }
6. Специфичность (вес ⚖) Калькулятор специфичности — http://specificity.keegan.st/ a = 1 a.class = 11 #id.class = 110 #id.class.other = 120
7. Мини-опрос a { color: red; } #header a.link { color: blue; } #header .link { color: green; } #content a.link { color: magenta; } ойлютс 1 111 110 111
8. Мини-опрос .link.link.link { color: red; } a.link { color: blue; } 30 11
10. .news .news-item a Бенчи селекторов — https://github.com/benfrain/css-performance-tests
11. Наследование, специфичность и каскад
13. .cabin-class-trigger .srch-cntrl-px-cbn-cls .cbn-cls-trvlrs-trgr .search-controls-pax-cabin-class .cabin-class-travellers-trigger
14. .list .news-list .tile-list
15. <ul class="news-list"> <li> <a href="#"> <span class="datetime">14:20 29 января</span> </a> </li> </ul> .news-datetime .news-list li a span.datetime span.datetime
16. .news-list { li { a { span.datetime { } } } } Препроцессоры .news-list { li {} a {} span.datetime {} }
18. .ticket { .title {color: red;} .price {} .proposals {} } .hotel { .title {color: blue;} .stars {} } <div class=“ticket”> <div class=“price”>123</price> <div class=“title”>Москва — Магадан</div> <ul class=“proposals”></ul> </div> <div class=“hotel”> <div class=“title”>Grand Palace</div> <div class=“stars”></div> </div> <div class=“ticket”> <div class=“price”>123</price> <div class=“title”>Москва — Магадан</div> <ul class=“proposals”></ul> <div class=“hotel”> <div class=“title”>Grand Palace</div> <div class=“stars”></div> </div> </div>
19. Модульность или компонентность или блочность • Изолированность; • Переиспользование; • Легкая модификация.
20. <div class="share"> <div class="header-logos"> <a href="#"></a> <div class="as_logo"></div> </a> </div> </div> Больной ублюдок! Помоги Даше- путешественнице найти в каком файле править класс
21. Методологии БЭМ OOCSS SMACSS SUITCSS AMCSS MCSS DOCSS RSCSS Поздравляю, вы послушали уже 7% доклада!
23. http://bem.info/ http://getbem.com/
24. Блок, элемент, модификатор Блок .news-list Элемент .news-list__item .news-list__item-favourite Модификатор
25. Изображение с сайта http://getbem.com/
26. Sass/LESS .block { &__content {} &__title {} } .block__content {} .block__title {}
27. Миксование блоков <div class="news-item"> <div class="news-item__icon"></div> <div class="news-item__category badge —advise"></div> <div class="news-item__content"></div> </div>
28. .b-facilities «b-» — это не БЭМ .facilities
29. .form-buy-results__to-city__slider__tab__column_buy Доклад Игоря Зенича про частые ошибки http://ihorzenich.github.io/talks/2015/frontendweekend-bem/ .form-buy-results__column_buy
30. <div class=“block”> <div class=“block__element”></div> </div> .block .block__element { } .block__element { }
31. <div class=“block”> <div class=“block__element grid__content”></div> </div> <div class=“block grid”> <div class=“block__element grid__content”></div> </div>
32. SUITCSS Компонент .MyComponent Элемент .MyComponent-element .MyComponent--modifier Модификатор .MyComponent Стейт .is-animating
33. Atomic CSS или почему я не использую классы-хелперы .Mt10 { margin-top: 10px; } .Pos-r { position: relative; } <div class="Fl-start Mend-10 My-2 Pos-r NoTextDecoration Ov-h Z-1 Pt-0 Ta-c”></div> Код с сайта http://my.yahoo.com/
34. ASCSS Блок .block Элемент .block__element .block.––modifier Модификатор .block Стейт .is-active
35. Scalable CSS Reading List (https://github.com/davidtheclark/scalable-css-reading-list) CSS Guidelines (http://cssguidelin.es/) Sass Guidelines (http://sass-guidelin.es/) Must Watch CSS talks (https://github.com/AllThingsSmitty/must-watch-css) Что почитать?
36. Aviasales office Grand Palace, 2nd floor @fliptheweb artur.kornakov@aviasales.ru Cпасибо!