2015
Pluralsight / Frontend Masters
Tim Warner
5:50
English

CSS architecture expert Jonathan Snook shares his experience building large sites with large teams to make your CSS more maintainable using his Scalable Modular Architecture for CSS (SMACSS) methodology. Learn categorization and naming convention—things that might seem simple at first but can actually be quite difficult. Then go deeper with a number of concepts and examples that help demonstrate when to create class rules instead of element rules, how to limit depth of applicability, and how to manage visual states.

Categorization
1h 9m
Introduction 8m 45s
Why SMACSS? 10m 33s
Base and Layout 5m 27s
Module 10m 55s
State and Themes 10m 26s
Exercise 1: Layout Styles 1m 44s
Exercise 1: Solution 21m 47s
Naming Convention
1h 30m
Base and Layout Names 11m 45s
Module and Module Variation Names 10m 54s
State Names 5m 53s
Theme Names 12m 8s
Using Third Party Libraries 12m 2s
Prefixing for Versioning 10m 24s
Thoughts on CSS Workflow 4m 59s
Naming Convention Recap 11m 18s
Exercise 2: Module Class Names 10m 54s
Decoupling CSS from HTML
1h 28m
When Is It Base? 12m 12s
Depth of Applicability 7m 28s
Decoupling CSS from HTML 10m 10s
The Owl Selector 15m 19s
Exercise 3: Creating a SMACSS Navigation 2m 28s
Exercise 3: Solution 40m 31s
State-based Design
1h 42m
State Representation 5m 48s
Media Query State 11m 0s
CSS Panic 9m 25s
Preprocessors 5m 35s
Extending Classes 11m 55s
Prototyping and Style Guides 9m 0s
Proto Engine 14m 47s
Documentation Generators 9m 35s
Exercise 4: Templating 3m 27s
Exercise 4: Solution 10m 44s
Course Summary 11m 28s

pluralsight.com/courses/scalable-modular-architecture-for-css, / frontendmasters.com

Download File Size:1.67 GB

---