SMACSS - масштабируемая модульная архитектура css

1. SMACSS
масштабируемая модульная
архитектура CSS
Александр Ахатов
Front-end Dev Lead

2. Зачем?
Слайд 10 из 1111

3. Effect
• дублирующийся код
• запутанная структура
• тяжело поддерживать
• сложно масштабировать
• и т.д.
Слайд 11 из 1111

4. Cause
• лень
• нежелание разбираться в
чужом коде
• цейтнот
• ОТСУТСТВИЕ СИСТЕМЫ
• и т.д.
Слайд 100 из 1111

5. Что делать?
Слайд 101 из 1111

6. Что делать?
Слайд 110 из 1111

7. SMACSS
by Jonathan Snook
Слайд 111 из 1111

8. Структура CSS
1. General
2. Layout
3. Module
4. State
Слайд 1000 из 1111

9. General
• html теги без классов и #ID
• + reset.css
Слайд 1001 из 1111

10. Layout
• префикс .l- или #ID
• классы для position, float и display
• + grid.css
Слайд 1010 из 1111

11. Module
• без префиксов (.module {...})
• подклассы и классы-модификаторы
(.module-subclass {...})
• максимальная независимость как от
структуры самого модуля так и от
контекста
Слайд 1011 из 1111

12. State
• префикс .is-state
• описание любого состояния отличающегося от
дефолтного (.is-hidden, .is-active, .is-logged)
• допускается использование !important (если оно
оправданно)
Слайд 1100 из 1111

13. Сухой остаток
+ дополнительные уровни семантики
+ управляемый код
+ расширяемый код
+ возможность повторного использования
- это не панацея
- надо думать
- следовать правилам
Слайд 1101 из 1111

14. Ресурсы
SMACSS.com
и для общего развития
OOCSS, БЭМ, HTML5 Boilerplate,
normalize.css, Bootstrap, 960.gs, Eric Meyer
CSS Reset
Слайд 1110 из 1111

15. Вопросы?
Задавайте умные вопросы.
Получайте умные ответы.
(меня зовут Александр, можно просто Саша)
Слайд 1111 из 1111

16. Александр Ахатов
a.akhatov@sysiq.com
alexander.akhatov