Slides from a talk given at CSS Dev Conf 2012

1. DISPLACING WORST PRACTICES
(and making better CSS for all)
Pam Selle
@pamasaur
thewebivore.com

2. STORYTIME

3. No.

4. Yes.

5. THE PLAN
• What are the ‘worst practices’?
• Identifying
• Solving
• Practices for prevention

6. IDENTIFYING WORST
PRACTICES

7. REDUNDANCY
• Symptom: Declaring styles that are inherent, styles that negate
other ones in the chain.
• Solution: Take your freebies and remove things
that don’t matter.
div { display: block; }
.my-class { display: block; float: left; }
img { display: inline-block; }
span { display: inline; }
.nav { position: absolute; float: left; }

8. REDUNDANCY
Prescription:
Mozilla Developer Network

9. REPETITION AND
DISORGANIZATION
• Symptom: See many of the same declarations over and over.
• Symptom: See styles being overridden in web inspector.
• Symptom: Having to reset styles because of previous
declarations.

10. REPETITION AND
DISORGANIZATION
.blue-title { color: blue; font-size: 16px; font-
family: Arial }
.blue-content { color: blue; font-size: 14px; font-
family: Arial }
.blue-title, .blue-content {color: blue; font-
family: Arial; }
.blue-title { font-size: 16px; }
.blue-content { font-size: 14px; }
%blue-thing {color: blue; font-family: Arial; }
.blue-title { @extend %blue-thing; font-size:
16px; }
.blue-content { @extend %blue-thing; font-size:
14px; }

11. h2 {
border-bottom: 1px solid #ddd;
padding: 10px 0;
float: left;
}
h2.other-title {
border-bottom:none;
padding:0 0 5px;
float:none;
}
.secondary-title {
border-bottom: 1px solid #ddd;
padding: 10px 0;
float: left;
}
.other-title {
padding:0 0 5px;
}

12. REPETITION AND
DISORGANIZATION
Prescription:
Refactoring, with a side of
architecture.

13. DETOUR INTO
PREPROCESSORS
• Favorite benefits of preprocessors:
• Partials (architecture)
• Extendables (in Sass 3.2) %
• Sprite benefits (Compass)

14. OVERSPECIFICITY
• Wasting your time and the browser’s time
.header .logo .title.name { }
#nav ul li a { }
.content a.title { }
.logo > .title { }
.nav li > a { }
.content .title { }

15. OVERSPECIFICITY
Prescription:
Understanding how browsers
interpret CSS.

16. HOW BROWSERS EVALUATE CSS
Resources:
https://developers.google.com/speed/docs/best-practices/rendering
https://developer.mozilla.org/en-US/docs/CSS/Writing_Efficient_CSS
The engine evaluates each rule from right to left, starting
from the rightmost selector (called the "key") and moving
through each selector until it finds a match or discards the
rule. (The "selector" is the document element to which the
rule should apply.)

17. HOW BROWSERS EVALUATE CSS
Specificity:
1. Ids
2. Classes
3.Tags
4. Universals
From SpeciFISHity by Weyl

18. INVALID DECLARATIONS
• Symptom: Crossed out in web inspector, because it’s wrong,
not overridden.
• Symptom:A style is written, but not rendering. (because it’s
wrong)
• Solution: ⌫.And read the MDN.
.classy {
background-position: inital initial;
font: Arial;
font: 14px/16px Arial sans-serif;
padding: -10px;
}

19. NO FALLBACKS
• Know what you support, and debug before you see it in the
browser.
• Most common with colors, so add a simple color
(background-, border-) declaration fallback.
• Includes setting position properly -- a common problem in
some browsers

20. NO FALLBACKS
Common Suspects:
rgba()
linear-gradient
radial-gradient
box-shadow
position: absolute (forgetting a vertical or horizontal position)

21. INLINE STYLES
The purpose of styles is to to separate
structure from presentation.
Oh, and it will also give you specificity problems.

22. DISPLACING WORST
PRACTICES

23. TRAIN EARLY AND OFTEN

24. TRAIN EARLY
• “Bootcamp”
• Presentations on full stack/tools
• Identify available resources
• Documentation, videos, useful tutorials
• Mentoring

25. ONBOARDING
• Documentation, Documentation, Documentation
• Onboarding session
• Make past presentations available

26. KEEP IT UP
• Lightning talks
• Hack Days
• See “Zombies in My Workplace” for more ideas
• http://www.slideshare.net/sbastn/zombies-in-my-workplace

27. STYLEGUIDES

28. TEXTUAL STYLEGUIDES
• Document!
• Style
• Idioms
• Structure

30. TEXTUAL STYLEGUIDES
• Public Styleguides
• Google: http://google-styleguide.googlecode.com/svn/trunk/htmlcssguide.xml
• GitHub: https://github.com/styleguide/css
• ThinkUp: https://github.com/ginatrapani/ThinkUp/wiki/Code-Style-Guide:-CSS
• Manifestos
• Idiomatic CSS: https://github.com/necolas/idiomatic-css
• SMACSS: http://smacss.com/

31. VISUAL STYLEGUIDES
• Visual Dictionary
• Explain visuals and usage
• Interface with visual designers

33. KSS
•Generated CSS documentation
http://warpspire.com/kss/
•Learn to generate your own styleguide:
http://warpspire.com/kss/styleguides/

34. INTERACTIVE STYLEGUIDES
• Put your elements in full context
• Maintain a site-wide brand
• Reduce, Reuse, & Recycle

37. CODE REVIEW

38. INTRODUCING CODE REVIEW
• Use your styleguide/documentation as guideline
• Continues mentoring process
• Saves QA time by reviewing before staging

39. MODULAR ORGANIZATION

40. INTRODUCING
ARCHITECTURE
• Consider pre-processors
• Consider your build process
• Consider adopting a methodology (OOCSS, etc.)
• Measure everything
• Interface with visual design strategy

41. FINAL INVENTORY
•Identify and repair misguided styles
•Tools to improve and embark on the joyous path
of maintainability

42. Thanks.
Pam Selle
thewebivore.com
@pamasaur