CSS Architecture - Speaker Deck

Slide 1

Slide 1 text

No content

Slide 2

Slide 2 text

Beau Smith interface design & dev

Slide 3

Slide 3 text

Good at CSS? HTML5 Photoshop →


JavaScript
@media queries
CSS3
Browser diﬀerences
no s for layout

Slide 4

Slide 4 text

Good at {programming lang}? extensible readable code functions decoupled from main app modular abstract easy to change or extend scalable object-oriented DRY

Slide 5

Slide 5 text

Lorem ipsum dolor.

div { color: fuschia; }

Slide 6

Slide 6 text

Lorem ipsum dolor.

.foo { color: fuschia; }

Slide 7

Slide 7 text

CSS Architecture

Slide 8

Slide 8 text

csslint.net

Slide 9

Slide 9 text

The Goals of Good CSS Architecture

Slide 10

Slide 10 text

Predictable Reusable Maintainable Scaleable

Slide 11

Slide 11 text

Predictable

Slide 12

Slide 12 text

Reusable

Slide 13

Slide 13 text

Maintainable

Slide 14

Slide 14 text

Scaleable

Slide 15

Slide 15 text

Predictable Reusable Maintainable Scaleable

Slide 16

Slide 16 text

Common Practices =(

Slide 17

Slide 17 text

Modifying components based upon their parent elements .widget { width: 200px; background: yellow; border: 1px solid black; color: black; } #sidebar .widget { width: 100px; } body.homepage .widget { background: white; } ☐ Predictable ☐ Reusable ☐ Maintainable ☐ Scaleable

Slide 18

Slide 18 text

Soware entities (classes, modules, functions, etc.) should be open for extension, but closed for modiﬁcation. en.wikipedia.org/wiki/Open/closed_principle Open/Closed Principle

Slide 19

Slide 19 text

Overly complicated selectors #main-nav ul li ul li div { } #content article h1:first-child { } #sidebar > div > h3 + p { } ☐ Predictable ☐ Reusable ☐ Maintainable ☐ Scaleable

Slide 20

Slide 20 text

Overly generic class names

...

Lorem ipsum dolor sit amet, consectetur elit. Click Me!

.widget {} .widget .title {} .widget .contents {} .widget .action {} ☐ Predictable ☐ Reusable ☐ Maintainable ☐ Scaleable

Slide 21

Slide 21 text

Making a rule do too much .widget { position: absolute; top: 20px; left: 20px; background-color: red; font-size: 1.5em; text-transform: uppercase; } ☐ Predictable ☐ Reusable ☐ Maintainable ☐ Scaleable

Slide 22

Slide 22 text

Why is this happening? ☐ Predictable ☐ Reusable ☐ Maintainable ☐ Scaleable

Slide 23

Slide 23 text

✦ Too much styling burden on the CSS. ✦ CSS requiring intimate knowledge of the HTML. ✦ Too much “presentation” in the HTML. ✦ HTML elements with the sole purpose of providing CSS hooks. Why is this happening?

Slide 24

Slide 24 text

The Solution

Slide 25

Slide 25 text

✦ HTML is part of the presentation ✦ Decouple CSS from HTML structure ✦ CSS deﬁnes style, HTML assigns style ✦ Use more classes in HTML The Solution HTML bloat?

Slide 26

Slide 26 text

Be intentional /* Grenade */ #main-nav ul li ul { } /* Sniper Rifle */ .subnav { } ☐ Predictable ☐ Reusable ☐ Maintainable ☐ Scaleable

Slide 27

Slide 27 text

Separate our concerns

Destroy

☐ Predictable ☐ Reusable ☐ Maintainable ☐ Scaleable Layout & Position Look & Feel

Slide 28

Slide 28 text

Namespace your classes ☐ Predictable ☐ Reusable ☐ Maintainable ☐ Scaleable

...

Lorem ipsum dolor.

.widget { } .widget .title { } .widget .content { }

...

Lorem ipsum dolor.

.widget { } .widget-title { } .widget-content { }

Slide 29

Slide 29 text

Extend components with modiﬁer classes ...

...

... .widget { } #homepage .widget { }

...

.widget { } .widget-featured { } ☐ Predictable ☐ Reusable ☐ Maintainable ☐ Scaleable

Slide 30

Slide 30 text

Organize your styles into a logical structure Base Reset rules and element defaults Layout Positioning of site-wide elements and generic layout helpers like grids Modules Reusable visual elements State Toggled states of layout or modules (via JavaScript) Theme (optional) Look and feel http://smacss.com

Slide 31

Slide 31 text

Use classes for styling and styling only Classes only for styles When we see a class in HTML, you should be able to instantly understand it’s purpose. Class of unknown purpose in HTML Should we remove it? Namespace classes Perhaps use

to separate presentation and behavior.

Slide 32

Slide 32 text

Logically structured class names /* A component or sub-component? */ .button-group { } /* A component modifier for .button? */ .button-primary { } /* A component sub-component within .button? */ .button-icon { } /* Is this a component class or a layout class? */ .header { }

Slide 33

Slide 33 text

Logically structured class names /* Component Rules */ .component-name .component-name--modifier-name .component-name__sub-component .component-name__sub-component--modifier-name /* Layout Rules */ .l-layout-method .grid /* State Rules */ .is-state-type /* Non-styled JavaScript Hooks */ .js-action-name

Slide 34

Slide 34 text

Logically structured class names /* A component */ .button-group { } /* A component modifier (modifying .button) */ .button--primary { } /* A component sub-component (lives within .button) */ .button__icon { } /* A layout class */ .l-header { } .button-group { } .button-primary { } .button-icon { } .header { }

Slide 35

Slide 35 text

Tools: Preprocessors (Sass/SCSS, LESS & Stylus) ✦ Variables ✦ Operations ✦ Nesting ✦ Mixins ✦ Extend ✦ Placeholders

Slide 36

Slide 36 text

General CSS Rules ✦ Don’t allow IDs in your selectors. ✦ Don’t use non-semantic type selectors (e.g. DIV, SPAN) in any multi-part rule. ✦ Don’t use more than 2 combinators in a selector. ✦ Don’t allow any class names that begin with “js-”. ✦ Warn if frequently using layout and positioning for non “l-” prefixed rules. ✦ Warn if a class defined by itself is later redefined as a child of something else.

Slide 37

Slide 37 text

Summary ✦ CSS isn’t just visual design. ✦ Concepts like OOP, DRY, the open/closed principle, separation of concerns, etc. still apply to CSS. ✦ Judge your organizational methods by whether they make development more eﬃcient long-term. ✦ Strive for CSS that is predictable, reusable, maintainable, and scaleable.

Slide 38

Slide 38 text

Credits ✦ This presentation is heavily inﬂuenced by Philip Walton’s article on CSS Architecture. While I have been preaching many of these techniques for years, Philip laid out the arguments, techniques, and examples in a wonderful article. Thanks Philip. http://engineering.appfolio.com/2012/11/16/css-architecture

Slide 1

Slide 1 text

Slide 2

Slide 2 text

Slide 3

Slide 3 text

Slide 4

Slide 4 text

Slide 5

Slide 5 text

Slide 6

Slide 6 text

Slide 7

Slide 7 text

Slide 8

Slide 8 text

Slide 9

Slide 9 text

Slide 10

Slide 10 text

Slide 11

Slide 11 text

Slide 12

Slide 12 text

Slide 13

Slide 13 text

Slide 14

Slide 14 text

Slide 15

Slide 15 text

Slide 16

Slide 16 text

Slide 17

Slide 17 text

Slide 18

Slide 18 text

Slide 19

Slide 19 text

Slide 20

Slide 20 text

...

Slide 21

Slide 21 text

Slide 22

Slide 22 text

Slide 23

Slide 23 text

Slide 24

Slide 24 text

Slide 25

Slide 25 text

Slide 26

Slide 26 text

Slide 27

Slide 27 text

Slide 28

Slide 28 text

...

...

Slide 29

Slide 29 text

Slide 30

Slide 30 text

Slide 31

Slide 31 text

Slide 32

Slide 32 text

Slide 33

Slide 33 text

Slide 34

Slide 34 text

Slide 35

Slide 35 text

Slide 36

Slide 36 text

Slide 37

Slide 37 text

Slide 38

Slide 38 text

Slide 39