SMACSS

PHP User Group #12 meetup

Transcript

1. SMACSS Max Kovalev, EPAM Systems
6. Типичные проблемы • Забудьте о масштабируемости • Бардак в структуре • Повторяющийся код • Лишние и неиспользуемые стили • ! i m p o r t a n t сплошь и рядом • ... 2
7. Scalable and Modular Architecture for CSS pronounced “smacks”
8. Jonathan Snook
9. Принципы
10. Rules • Base • Layout • Module • State • Theme* 6
11. Base
12. Base • reset.css • normalize.css • Вендоры • Стили для простых тегов 8
13. Base b o d y { m a r g i n : 0 ; p a d d i n g : 0 ; } a { c o l o r : b l a c k ; } 0 1 . 0 2 . 0 3 . 0 4 . 0 5 . 0 6 . 0 7 . 9
15. Layout
16. Layout • Major • Minor 11
17. Major • Header • Footer • Sidebar • ... Tip > Единственные на странице, "l-" префикс 12
18. Minor • Forms • Buttons • Nav menu • ... 13
19. Layout (Major) < b o d y c l a s s = " l - f l u i d - l a y o u t " > 14
20. Module
21. Module < a s i d e i d = " s i d e b a r " > < u l c l a s s = " l - s i d e b a r - l i s t " > < l i > < h 2 > T i t l e < / h 2 > < p > t e x t < / p > < / l i > < / u l > < / a s i d e > 0 1 . 0 2 . 0 3 . 0 4 . 0 5 . 0 6 . 0 7 . 0 8 . 16
22. Module < u l c l a s s = " l - s i d e b a r - l i s t " > < l i c l a s s = " s i d e b a r - i t e m" > < h 2 c l a s s = " i t e m - t i t l e i t e m - t i t l e - n o r m a l" > T i t l e < / h 2 > < p > t e x t < / p > < / l i > < / u l > 0 1 . 0 2 . 0 3 . 0 4 . 0 5 . 0 6 . 17
23. Module (css) . s i d e b a r - i t e m { } . s i d e b a r - i t e m - t i t l e { } . s i d e b a r - i t e m - n o r m a l { } Tip > Независимость от структуры 0 1 . 0 2 . 0 3 . 18
24. State
25. State rules • hidden/visible • active/inactive • collapsed/expanded • ... 20
26. State < d i v c l a s s = " m e s s a g e i s - w a r n i n g" > M e s s a g e t e x t < / d i v > Tip > Взаимодействие с js 0 1 . 0 2 . 0 3 . 21
27. Theme
28. Theme < l i n k r e l = " s t y l e s h e e t " h r e f = " s t y l e . c s s " > < l i n k r e l = " s t y l e s h e e t " h r e f = "t h e m e . c s s" > Tip > Перезапись 0 1 . 0 2 . 23
29. Theme < d i v c l a s s = " s o r t i n g - w i d g e t t h e m e - s o r t i n g" > c o n t e n t < / d i v > 0 1 . 0 2 . 0 3 . 24
30. / * s t y l e . c s s * / . s o r t i n g - w i d g e t { c o l o r : r e d ; } / * t h e m e . c s s * / . t h e m e - s o r t i n g { c o l o r : y e l l o w; } 0 1 . 0 2 . 0 3 . 0 4 . 0 1 . 0 2 . 0 3 . 0 4 . 25
31. Улучшения • Минимизация селекторов • # s i d e b a r d i v u l > .class > ul || .list • Использование препроцессоров • SASS, LESS, Stylus, ... • Работает с любым html (4,5) • Дополнительные уровни семантики • Уменьшение специфичности структуры 26
32. Это винтик, это отвертка, винтик можно крутить отверткой. Это всякие железяки, их можно соединять винтиками, закрутив отверткой. Еще бывают гайки и шестеренки. Задание: Постройте синхрофазотрон. “
33. sass-lang.com gruntjs.com compass-style.org 28
34. Структура (1) • /design • /global • /includes • /layout • /module • /specific • style.scss 29
35. Структура (2) • /components • /global • /layouts • style.scss 30
36. Структура (2/components) • /article • /calendar • /social • article.scss • calendar.scss • social.scss 31
37. Структура (2/components/article) • extends.scss • mixins.scss • variables.scss 32
38. Структура (style.scss) / / s o m e s e t t i n g s @ i m p o r t " c o m p a s s / r e s e t " ; @ i m p o r t " c o m p a s s " ; @ i m p o r t "c o m p o n e n t s / a r t i c l e" ; 0 1 . 0 2 . 0 3 . 0 4 . 33
40. css-tricks.com/smacss-press
41. Ссылки • Презентация: bit.ly/SMACSS ru.bem.info, oocss.org, Atomic Design, Normalize.css, Front-end Style Guides, SASS, LESS 35
42. Спасибо such presentation much information wow @maxkovalev_