Understanding Modular CSS

Slide 1

Slide 1 text

Modular CSS Making stylesheets flexible! Understanding @johnwlong Sass Summit 2014 #modularcss

Slide 2

Slide 2 text

No content

Slide 3

Slide 3 text

www.thesassway.com

Slide 4

Slide 4 text

www.uservoice.com

Slide 5

Slide 5 text

SMACSS smacss.com BEM bem.info OOCSS oocss.org

Slide 6

Slide 6 text

Why MODULAR CSS?

Slide 7

Slide 7 text

“It’s almost a challenge to find a development team that’s working on a codebase that’s more than a couple of years old where the CSS isn’t the most frightening and hated part of that system.” Andy Hume CSS for Grownups SXSW Interactive, 2012 bit.ly/css-for-grownups

Slide 8

Slide 8 text

MODULAR CSS An example

Slide 9

Slide 9 text

Simple Menu

Slide 10

Slide 10 text

ul.menubar { background: white; @include box-shadow(rgba(black, 0.2) 0 1 list-style: none; font-size: 14px; padding: 0 10px; > li { display: inline-block; position: relative; > a { color: black; display: block; padding: 10px 14px; text-decoration: none; &:hover { background: #29a7f5; color: white; } } > ul { @include box-shadow(rgba(black, 0.5) 0 @include border-radius(3px); @include border-top-left-radius(0); display: none; position: absolute;

File
- Open
- Save
- Save as...
- Close
- Exit

http://bit.ly/menu-1 1

Slide 11

Slide 11 text

File
- Open
- Save
- Save as...
- Close
- Exit

.menubar { background: white; @include box-shadow(rgba(black, 0.2) 0 1 list-style: none; font-size: 14px; padding: 0 10px; > li { display: inline-block; position: relative; } } .menubar-item { color: black; display: block; padding: 10px 14px; text-decoration: none; &:hover { background: #29a7f5; color: white; } } .menu { @include box-shadow(rgba(black, 0.5) 0 5 @include border-radius(3px); @include border-top-left-radius(0); 2 http://bit.ly/menu-2

Slide 12

Slide 12 text

File
- Open
- Save
- Save as...
- Close
- Exit

.menubar { background: white; @include box-shadow(rgba(black, 0.2) 0 1 list-style: none; font-size: 14px; padding: 0 10px; } .menubar-item { display: inline-block; position: relative; } .menubar-item-target { color: black; display: block; padding: 10px 14px; text-decoration: none; &:hover { background: #29a7f5; color: white; } } 3 http://bit.ly/menu-3

Slide 13

Slide 13 text

Learn to think in objects. Not selectors.

Slide 14

Slide 14 text

Parent-Child Parent .tableview Child .tableview-item Grandchild .tableview-item-cell

Slide 15

Slide 15 text

TableView

Slide 16

Slide 16 text

General

http://bit.ly/modular-tableview

Slide 17

Slide 17 text

Wi-Fi John's Airport

http://bit.ly/modular-tableview

Slide 18

Slide 18 text

Airplane Mode OnOff

http://bit.ly/modular-tableview

Slide 19

Slide 19 text

Plural-Parent Pattern Parent .faqs Child .faq Grandchild .faq-title

Slide 20

Slide 20 text

Use the parent-child pattern: (Don’t enforce it.) Declare hierarchy.

Slide 21

Slide 21 text

Subclassing Object .button .item Subclass .dropdown-button .ticket-item Subclass Child .ticket-item-title

Slide 22

Slide 22 text

.button { ... } .next-button { ... } .previous-button { ... } .dropdown-button { ... } .select-button { ... } Button Back Next Dropdown Select http://bit.ly/modular-subclassing Buttons

Slide 23

Slide 23 text

Subclassing with @extend .button { ... } .dropdown-button { @extend .button; }

...

.button { ... } .dropdown-button { ... } ... Standard CSS Extending Two classes One class

Slide 24

Slide 24 text

Use subclasses to declare inheritance. (An object should have the properties of another.)

Slide 25

Slide 25 text

Object .item Contextual .ticket .item .article .item Child .item .title .ticket .item .title Contextual

Slide 26

Slide 26 text

.item { ... } .ticket .item { ... } .ticket .item .title { ... }

...

Contextual

Slide 27

Slide 27 text

.item .item .ticket-item .article-item .ticket .item .article .item .item-title .ticket-item-title .item .title .ticket .item .title Subclassing vs. Contextual

Slide 28

Slide 28 text

Much more modular. Require structured markup. (Can be useful for theming) Subclassing vs. Contextual

Slide 29

Slide 29 text

Structural requirements on markup (At all costs. With a few exceptions.) should be avoided.

Slide 30

Slide 30 text

Modifiers Positive .has-menu Negative .no-border, .no-margin State .is-selected, .is-active Other .primary, .secondary

Slide 31

Slide 31 text

Generic Modifiers .is-selected { background: $highlight-color; } .is-hidden { display: none !important; } .float-left { float: left !important; } .float-right { float: right !important; } .mt0 { margin-top: 0 !important; } .ml0 { margin-left: 0 !important; } .ma0 { margin: 0 !important; } .clearfix { @include clearfix; } Important!

Slide 32

Slide 32 text

Specific Modifiers .button { &:hover { ... } &.small { ... } &.large { ... } &.is-disabled, &[disabled] { ... } } Use nesting & the ampersand operator

Slide 33

Slide 33 text

Use modifiers to (Or state.) Change attributes!

Slide 34

Slide 34 text

Modifiers vs. Subclasses Better for small clearly defined changes. Better for major changes or to declare type-of semantics.

Slide 35

Slide 35 text

Naming conventions Object .tableview .ticket .noun Child .tableview-item  .ticket-title .noun-noun Subclass .multiselect-tableview .priority-ticket .adjective-noun Modiﬁer .is-selected  .scrollable .preﬁx-adjective or .adjective

Slide 36

Slide 36 text

Modular Typography

Slide 37

Slide 37 text

Modular Typography http://bit.ly/modular-typography

Slide 38

Slide 38 text

.h1, .h2, .h3, .h4, .h5, .h6 { ... } .text-left { text-align: left !important; } .text-center { text-align: center !important; } .text-right { text-align: right !important; } .quiet { color: $quiet-color !important; } .loud { color: $loud-color !important; } .ﬁxed { font-family: $ﬁxed-font-family; } http://bit.ly/modular-typography Modular Typography

Slide 39

Slide 39 text

.typeset { h1 { @extend .h1; margin: 1em 0 0.5em; } h2 { @extend .h2; margin: 1em 0 0.5em; } h3 { @extend .h3; margin: 1em 0 0.5em; } p, ul, ol, pre { margin: 1em 0; }  ul { list-style: disc; ... } pre, code { @extend .ﬁxed; } ... } http://bit.ly/modular-typography Modular Typography

Slide 40

Slide 40 text

(Use modifiers for one-offs.) Scope typography with a single class.

Slide 41

Slide 41 text

Reset

Slide 42

Slide 42 text

It’s easy @import “compass”; @include global-reset;

Slide 43

Slide 43 text

Reset vs. Normalize Zeros out styles on all elements. Normalizes styles across browsers so that all browsers share a similar stylesheet.

Slide 44

Slide 44 text

markup independence. A global reset gives true (And is therefore best, IMHO.)

Slide 45

Slide 45 text

Never turned off. Styles should be layered on (Use a reset please.)

Slide 46

Slide 46 text

What about SASS?

Slide 47

Slide 47 text

MODULAR SASS Well written is just good CSS.

Slide 48

Slide 48 text

Slide 49

Slide 49 text

Closing Thoughts

Slide 50

Slide 50 text

IDs or tags. Don’t style with (Simple class-based selectors are better.)

Slide 51

Slide 51 text

Contextual styles are (Avoid nesting like the plague.) mostly evil!!

Slide 52

Slide 52 text

MoarRR markup. (Turns out it’s much easier to maintain.) Less styles and

Slide 53

Slide 53 text

Minimizing Dependencies. Modularity is mostly about (For reusable code.)

Slide 54

Slide 54 text

bit.ly/css-for-grownups

Slide 55

Slide 55 text

SMACSS smacss.com BEM bem.info OOCSS oocss.org thesassway.com

Slide 56

Slide 56 text

Thanks! http://codepen.io/collection/lmkqe http://bit.ly/understanding-modular-css Modular CSS examples: Presentation: