Our Best Practices Are Killing Us

OUR BEST PRACTICES ARE
KILLING US

photo by Joshua Stearns
Nicole Sullivan
Wednesday, March 30, 2011

WHAT WE WILL COVER:

❖ We have a problem
❖ CSS is not to blame
❖ Tools won’t solve it, but they can help


YUMMY DATA FROM
FACEBOOK


FACEBOOK BLUE

261

UNIQUE COLORS

548
unique hex values

Facebook

COLORS

6498
color declarations

Facebook

YUMMY DATA FROM
SALESFORCE


padding

3,668
padding declarations


ARE NICOLE’S CLIENTS
EXCEPTIONALLY MESSY?


ALEXA TOP 1000 STUDY
with Stoyan Stefanov


h1-h6

511
declarations setting styles for h1-h6

56% >10
9% >100

!important


!IMPORTANT

518
declarations using important

12% have greater than 50

ﬂoat

733
declarations ﬂoated elements

56% > 10
13% > 100

font-size

FONT-SIZE

889
declarations changed the font-size

78% >10
23% >100

DOES THIS APPLY TO YOU?
Do your websites have the same issues? Workshop


SO, DUPLICATION IS A
PROBLEM AT:
❖ Facebook
❖ Salesforce
❖ w3c
❖ Box.net
❖ the Alexa Top 1000 sites
❖ Government websites
❖ Small and large businesses


INSANITY:
doing the same thing over and over
and expecting different results


STOP POINTING FINGERS
the truth is, we all have this problem

http://www.ﬂickr.com/photos/illumiquest/2749137895/sizes/l/in/photostream/


“JAVASCRIPT DOESN’T SUCK
You’re just doing it wrong.” -- Douglas Crockford


CSS
“JAVASCRIPT DOESN’T SUCK
You’re just doing it wrong.” -- Douglas Crockford


ABOUT CSS
CSS (much like JS) will let
you do anything
(no matter how stupid)

wheeee!


THE POINT
IS...
That we don’t have to do
stupid things, just because
we can.


SO, WHAT ARE THE STUPID
THINGS?
Best Practice Myths


THREE BEST PRACTICE
MYTHS:

❖ Don’t add any extra elements
❖ Don’t add classes (Classitis! Ahhh!)
❖ Use descendent selectors exclusively


WHAT HAPPENS NEXT?
SPECIFICITY WARS


SPECIFICITY - THE SIMPLE
VERSION


VERSION

elements

& pseudo elements


VERSION

classes elements

& pseudo classes & pseudo elements
& attributes


VERSION

IDs classes elements

& attributes


VERSION

inline IDs classes elements

& attributes


VERSION

#sidebar ul li a.myclass:hover{}

& attributes


VERSION


3
& attributes


VERSION


2 3
& attributes


VERSION


1 2 3
& attributes


VERSION


0 1 2 3
& attributes


UNIVERSAL SELECTOR

* {}

& attributes


UNIVERSAL SELECTOR

* {}

0
& attributes


UNIVERSAL SELECTOR

* {}

0 0
& attributes


UNIVERSAL SELECTOR

* {}

0 0 0
& attributes


UNIVERSAL SELECTOR

* {}

0 0 0 0
& attributes


CONCATENATING
SPECIFICITY
.item{color: blue;}

ul li li li li li li li li li{color: red;}


& attributes


CONCATENATING
SPECIFICITY
.item{color: blue;}



0
& attributes


CONCATENATING
SPECIFICITY
.item{color: blue;}



1 0
& attributes


CONCATENATING
SPECIFICITY
.item{color: blue;}



0 1 0
& attributes


CONCATENATING
SPECIFICITY
.item{color: blue;}



0 0 1 0
& attributes


CONCATENATING
SPECIFICITY
.item{color: blue;}



10
& attributes


CONCATENATING
SPECIFICITY
.item{color: blue;}



0 10
& attributes


CONCATENATING
SPECIFICITY
.item{color: blue;}



0 0 10
& attributes


CONCATENATING
SPECIFICITY
.item{color: blue;}



0 0 0 10
& attributes


CLASS ORDER

<p class=”message error”>Borken!</p>


CLASS ORDER
The order of the classes makes no difference.

<p class=”message error”>Borken!</p>


SITE-WIDE HEADINGS

h1{color: #333; font-size: 24px; font-weight: bold}


& attributes

SITE-WIDE HEADINGS



1
& attributes

SITE-WIDE HEADINGS



0 1
& attributes

SITE-WIDE HEADINGS



0 0 1
& attributes

SITE-WIDE HEADINGS



0 0 0 1
& attributes

#sidebar


h3 {
color: #797979;
font-size: 12px;
font-weight: bold;
border-bottom: 1px solid #c5c5c5;
padding-bottom: 5px;
}


HOW DO YOU GET THE H3
TO LOOK DIFFERENT?
(but only in the sidebar)
(and using the semantically appropriate heading)


#SIDEBAR H3
#sidebar h3 {
color: #797979; font-size: 12px;font-weight: bold;
border-bottom: 1px solid #c5c5c5; padding-bottom: 5px;
}


THEN, YOUR DESIGNER
GIVES YOU A NEW MOCK

h3 {
color: #555;
font-size: 13px;
font-weight: bold;
background-color: #deeef8;
padding: 5px;
margin: 10px 0;
}


ADD IT TO THE STYLESHEET
#sidebar h3{
color: #797979; font-size: 12px; font-weight: bold;
border-bottom: 1px solid #c5c5c5; padding-bottom: 5px;
}
#sidebar .account h3{
color: #555; font-size: 13px; font-weight: bold;
background-color: #deeef8; padding: 5px; margin: 10px 0;
}


WHAT IS HAPPENING WITH
THE SPECIFICITY?
h3{...}

#sidebar h3{...}

#sidebar .account h3{...}


THE SPECIFICITY?
h3{...} 0 0 0 1

#sidebar h3{...}



THE SPECIFICITY?
h3{...} 0 0 0 1

#sidebar h3{...} 0 1 0 1



THE SPECIFICITY?
h3{...} 0 0 0 1

#sidebar h3{...} 0 1 0 1

#sidebar .account h3{...} 0 1 1 1


THE SITE HAS A WEATHER
MODULE IN THE SIDEBAR

h2
h3

#sidebar .weatherMod h3{
color: #fff;
text-transform: uppercase;
}


IMAGINE YOU RECEIVED
THIS WIREFRAME

h3

MORN NOON EVENING NIGHT h3
27° 35° 38° 30°


IMAGINE YOU RECEIVED
THIS WIREFRAME

h3

27° 35° 38° 30°

What if the visual designer decided that fewer
users would be interested in the by-hour weather,
so those titles should be smaller and not bold

NOTICE ANYTHING ABOUT
NESTING & SPECIFICITY?
h3

27° 35° 38° 30°

#sidebar .weatherMod h3{}

#sidebar .weatherMod .hourly h3{}


h3

27° 35° 38° 30°

0 1 1 1


h3

27° 35° 38° 30°

0 1 1 1
#sidebar .weatherMod .hourly h3{} 0 1 2 1


SIX MONTHS LATER, IT
GETS COMPLICATED

❖ Specificity grows over time
❖ Difficult to tell which rules will take precedence
❖ Developers end up coding by firebug


WHAT HAPPENS WHEN...
there are no more ways to make a rule more speciﬁc than the
one you are trying to override?


<h3 style=”color: red; font-weight: bold; font-size: 20px;”>My
shiny new heading level 3</h3>



<h3 style=”color: red; font-weight: bold; font-size: 20px;”>My
shiny new heading level 3</h3>


1 0 0 0


AND THEN ANOTHER
DEVELOPER SAYS...
“this is gross! we should not be using inline-styles”
but, at this point, what choice to they have left?


#sidebar .weatherMod .hourly .tuesday h3{color: blue !important;}

YOU MIGHT THINK
!IMPORTANT WOULD END
the speciﬁcity war, not so.



YOU MIGHT THINK

0 0 0 0



YOU MIGHT THINK

0 1 3 1 0 0 0 0


HOSTILE CODE
ENVIRONMENT
❖ Two layers develop
❖ Specificity grows over time (more and more rules become
important).
❖ Even more difficult to tell which rules will take precedence
❖ Developers always code by firebug
❖ Eventually, it becomes impossible to get the look and feel you
want.


SPECIFICITY AT IT’S WORST

normal
IDs
Classes
Elements



inline Inline Styles
normal
IDs
Classes
Elements


!important IDs
Classes
Elements
inline Inline Styles
normal
IDs
Classes
Elements


#sidebar

A Normal Heading Level 3


DUPLICATING PROPERTY
VALUE PAIRS
h1{ margin: 10px 0; color: #333; font-size: 24px; font-weight: bold}
h3{
margin: 5px 0; color: #333; font-size: 17px; font-weight: bold
}
#sidebar .collaborators h3{
margin: 5px 0; color: #333; font-size: 17px; font-weight: bold
}
#sidebar h3{color: #797979; font-size: 12px;font-weight: bold; border-bottom: 1px
solid #c5c5c5; padding-bottom: 5px;}
#sidebar .account h3{color: #555;font-size: 13px;font-weight: bold;background-color:
#deeef8;padding: 5px;margin: 10px 0;}


THREE PROBLEMS

❖ Duplication of property value pairs
❖ Duplication of elements (h3)
❖ Growing Speciﬁcity


DUPLICATING ELEMENTS
h1{}
h2{}
h3{}
#sidebar .collaborators h3{}
#sidebar h3{}
#sidebar .account h3{}
h4{}
h5{}
h6{}


GROWING SPECIFICITY
h1{}
h2{}
h3{}
#sidebar .collaborators h3{}
#sidebar h3{}
#sidebar .account h3{}
h4{}
h5{}
h6{}


HOW DO WE SOLVE THESE
PROBLEMS?
Examine our best practice myths rationally

❖ Add non-semantic elements judiciously
❖ Keep specificity as low as possible
❖ Abstract repeating visual patterns
❖ Use specificity to define your architecture


MEDIA BLOCK EXAMPLE


ALL OF THESE ARE THE
SAME OBJECT


WHAT DO WE KNOW?

❖ Can be nested
❖ Optional right button

❖ Must clearﬁx


WHAT DON’T WE KNOW?

❖ Image width and decoration vary
❖ Right content is unknown

❖ Width unknown


SEPARATE STRUCTURE
FROM CHROME


A FEW LINES OF HTML...

<div class="media attribution">
<a href="http://twitter.com/stubbornella" class="img">
<img src="mini.jpg" alt="Stubbornella" />
</a>
<div class="bd">@Stubbornella 14 minutes ago</div>
</div>


4 LINES OF CSS...

_


HTML SIZE
reduced by 50%

by Stefan Parker

“Due to these efforts, we cut our average
CSS bytes per page by 19% (after gzip) and
HTML bytes per page by 44% (before
gzip).”

Jason Sobel
http://www.facebook.com/note.php?note_id=307069903919

GREAT DEVELOPERS CAN
BUILD AMAZING THINGS
if we move worst-best practices out of our way


LET’S KEEP TALKING...
www.stubbornella.org
@stubbornella

OOCSS Project: http://github.com/stubbornella/oocss/


Our Best Practices Are Killing Us

Recommended

More Related Content

What's hot (20)

Similar to Our Best Practices Are Killing Us (9)

More from Nicole Sullivan (16)

Recently uploaded (20)

Our Best Practices Are Killing Us