Slide 1
Slide 1 text
BIG CSS
Canvas Conf, Birmingham 2012
BigCSS
Slide 2
Slide 2 text
HARRY ROBERTS
csswizardry.com
@csswizardry
Slide 3
Slide 3 text
bit.ly/NiOAOR
Slide 4
Slide 4 text
No content
Slide 5
Slide 5 text
BSKYB
Massive sites
Loads of devs
UI heavy
Long running projects
Slide 6
Slide 6 text
faavorite.com
Slide 7
Slide 7 text
FAAVORITE
Fairly small
Two devs
UI heavy
Long running project
Slide 8
Slide 8 text
WRITING CSS IS EASY...
Slide 9
Slide 9 text
.foo{
color:red; /* Very easy... */
}
Slide 10
Slide 10 text
ARCHITECTING IT ISNT...
,
Slide 11
Slide 11 text
SKYBET.COM
Biggest project I ever worked on...
<10,000 lines of CSS
2 files
Slide 12
Slide 12 text
MO DEVS, MO PROBLEMS
, ,
Slide 13
Slide 13 text
CSS DOESNT KILL PEOPLE...
Other developers do
,
Slide 14
Slide 14 text
CSS = WTF
Slide 15
Slide 15 text
CSS = WTF
HTML is viewed in situ...
Has no interdependencies...
Is, by nature, self-explanatory.
CSS relies on inheritance...
The cascade...
Specificity.
Slide 16
Slide 16 text
DEFER MORE WORK TO THE HTML
Slide 17
Slide 17 text
CSS PREPROCESSORS
Sass > LESS
Excellent when used correctly
Provide a disconnection
Less useful than a knowledge of architecture
Makes nothing better, only faster to write
Still only generating CSS
Slide 18
Slide 18 text
OOCSS
Promotes better understanding of everything
Solves problems with/in vanilla CSS
Can be combined with preprocessors
Slide 19
Slide 19 text
OBJECTS > COMPONENTS
Components are still cumbersome so...
Break components down further as...
Objects and abstractions are more useful.
Can reuse a nav abstraction way more than .main-nav
Slide 20
Slide 20 text
OBJECTS
Design patterns, not components
Very vaguely named
Insemantic classes (e.g. .media)
,
,
Slide 21
Slide 21 text
EXTENSIONS
Much, much more specific
Very explicitly named
Much longer classes (e.g. .user-avatar-link)
Slide 22
Slide 22 text
GOOD CSS HAS A ONE-TO-MANY
RELATIONSHIP WITH HTML
Slide 23
Slide 23 text
NAV ABSTRACTION
.nav{
list-style:none;
margin-left:0;
}
.nav > li,
.nav > li > a{
display:inline-block;
}
Slide 24
Slide 24 text
.nav{}
class="nav user-links"
class="nav site-nav"
class="nav breadcrumb"
class="nav sponsor-logos"
class="nav footer-nav"
Slide 25
Slide 25 text
faavr.it/csswizardry
45 instances on one page
9 unique
8 lines of CSS
Slide 26
Slide 26 text
THE EASIEST WAY TO
KEEP CSS MAINTAINABLE
IS TO AVOID WRITING IT
Slide 27
Slide 27 text
CASE STUDY — BSKYB
Slide 28
Slide 28 text
USER-ACTIONS MENU
Single component
One ID on the
-
Lots of descendants
Slide 29
Slide 29 text
OR...?
Slide 30
Slide 30 text
A BLOCKY LIST
.ui-list{}
Generic list
Any type of content
Slide 31
Slide 31 text
ICONS
As portable as ![]()
Spriteable
Slide 32
Slide 32 text
ICONS WITH TEXT
.ico-text{}
Sorts spacing/alignment
Any icon, any text
Slide 33
Slide 33 text
SPLIT ITEMS
.split{}
Any type of content
Restaurant menus etc
Slide 34
Slide 34 text
USER-ACTIONS MENU
A UI-list filled with...
Icon objects...
Icon-text objects...
Splitter components.
Slide 35
Slide 35 text
USER-ACTIONS MENU
No IDs, lots more markup and classes, a LOT less CSS.
Bespoke HTML and CSS (once compressed) weighed
147 bytes LESS than the Google favicon!
Abstractions come free-of-charge, they are
already there and free to use over and over and over
and over and over...
Slide 36
Slide 36 text
TIPS AND TRICKS
Slide 37
Slide 37 text
KEEP SPECIFICITY LOW
NO IDs IN CSS!!!
Write rulesets in specificity order
Avoid qualifying selectors
Avoid unnecessary nesting
Avoid chaining selectors
Slide 38
Slide 38 text
NO IDs IN CSS!!!
Literally no point
It takes 256 classes to override one ID
Make several classes out of the reusable parts of the ID
Slide 39
Slide 39 text
WRITE RULESETS IN
SPECIFICITY ORDER
Reset, elements, objects, components, style trumps
Not in occurrence order (e.g. header, page, footer)
Subsequent rulesets should only inherit, never undo
Slide 40
Slide 40 text
AVOID QUALIFYING SELECTORS
p.intro{} -> .intro{}
Increases specificity — extra selectors
Limits reusability — e.g. cannot be used on an
Less efficient — more work for the browser
Slide 41
Slide 41 text
AVOID UNNECESSARY NESTING
.carousel .pane{} -> .pane{}
Increases specificity
Limits portability
Less efficient
Slide 42
Slide 42 text
AVOID CHAINING SELECTORS
.msg.error{} -> .error-msg{}
Increases specificity
Less efficient
Slide 43
Slide 43 text
INDENT RULESETS
.carousel{}
.panes{}
.pane{}
.pane-title{}
.pane-img{}
Slide 44
Slide 44 text
INDENT RULESETS
Slide 45
Slide 45 text
CONTENT IS KING
Slide 46
Slide 46 text
CONTENT IS KING
/* comments */
Slide 47
Slide 47 text
QUASI-QUALIFIED SELECTORS
/*html*/.product-page{}
/*ol*/.breadcrumb{}
/*table*/.winners{}
Slide 48
Slide 48 text
TABLE OF CONTENTS
AND SECTION TITLES
/*
RESET.......Undo defaults
MEDIA.......The media object
MAIN........HTML/BODY, wrappers
SITE-NAV....Page’s nav bar
FOOTER......Disclaimer, links
*/
Slide 49
Slide 49 text
TABLE OF CONTENTS
AND SECTION TITLES
/* $MEDIA */
.media{}
...
/* $MAIN */
html{}
...
/* $SITE-NAV */
.site-nav{}
Slide 50
Slide 50 text
TAGS IN CSS
/*
^navigation ^lists ^text
*/
.nav{}
.nav > li,
.nav > li > a{}
Slide 51
Slide 51 text
TAGS IN CSS
/*
^layout ^lists ^tables
*/
.matrix{}
.matrix > li{}
Slide 53
Slide 53 text
OBJECT/EXTENSION POINTERS
/*
Extend `.nav{}` in theme.css
*/
.nav{}
.nav > li,
.nav > li > a{}
Slide 54
Slide 54 text
OBJECT/EXTENSION POINTERS
/*
Extends `.nav{}` in base.css
*/
.breadcrumb{}
.breadcrumb > li,
.breadcrumb > li > a{}
Slide 55
Slide 55 text
SAY WHAT NOW?!
Slide 56
Slide 56 text
SAY WHAT NOW?!
Write less CSS
Reuse more CSS — design patterns!
Let the HTML do some work for a change!
Get some rules, stick to them
Comments, comments, comments!!!
People are human
Slide 57
Slide 57 text
CSS ISNT ALWAYS THE PROBLEM
Other developers
Lack/loss of knowledge
Differing techniques
Forgetfulness
,
Slide 58
Slide 58 text
OTHER DUDE(TTE)S
Nicole Sullivan — @stubbornella
Jonathan Snook — @snookca
Nicolas Gallagher — @necolas
Slide 59
Slide 59 text
HARRY ROBERTS
csswizardry.com
@csswizardry