There are a million ways to write HTML and CSS, and everyone has their own, but is there a right way? Our code needs to be well structured, written in an organized manner, and performance driven. Sharing code amongst a team should be a joyful experience, not absolute terror. Shay talks about how to how to write tactical HTML and CSS, crafting code that is maintainable, flexible, and extensible. Covering new methodologies such as OOCSS and SMACSS learn how to architect websites which are manageable and performant.

1. TACTICAL
HTML & CSS
Shay Howe
@shayhowe
shayhowe.com
MODULAR
HTML & CSS

2. @shayhoweModular HTML & CSS
SHAY HOWE
shayhowe.com – @shayhowe

3. The Gust by Willem van de Velde the Younger

4. @shayhoweModular HTML & CSS
COMMON PROBLEMS
• Websites have difficulty scaling
• Code becomes brittle
• Files and code bases begin to swell

5. @shayhoweModular HTML & CSS
WHAT’S WRONG
• Best practices aren’t exactly best practices
• Standards need to evolve

6. @shayhoweModular HTML & CSS
BEST BAD PRACTICES
• Avoid extra elements
• Avoid classes
• Leverage type selectors
• Leverage descendent selectors

7. @shayhoweModular HTML & CSS
BEST BAD PRACTICES
Avoiding classes
section
ul#nav
li
{...}
section:nth-­‐child(2)
div:nth-­‐child(7)
>
a
{...}
Leveraging selectors
a.btn
{...}
#main
a.btn
{...}
#main
div.feature
a.btn
{...}

8. @shayhoweModular HTML & CSS
BEST BAD PRACTICES
Bad
#contact
li:nth-­‐child(1)
input,
#contact
li:nth-­‐child(2)
input
{
width:
160px;
}
#contact
li:nth-­‐child(3)
textarea
{
width:
280px;
}

9. @shayhoweModular HTML & CSS
BEST BAD PRACTICES
Good
.col-­‐1
{
width:
160px;
}
.col-­‐2
{
width:
280px;
}

10. @shayhoweModular HTML & CSS
SPECIFICITY?
• Specificity determines which styles are applied
• Each selector has a specificity weight
• High specificity beats low specificity
• Low specificity is key

11. Parade of the Black Sea Fleet by Ivan Aivazovsky

12. @shayhoweModular HTML & CSS
MAINTAINABILITY
Code must be...
• Organized
• Modular
• Performant

13. @shayhoweModular HTML & CSS
ORGANIZATION

14. @shayhoweModular HTML & CSS
APPROACH
• Stop thinking about pages
• Start thinking about components
• Take visual inventory

15. @shayhoweModular HTML & CSS
TECHNIQUE
Base
• Core styles for entire site
Normalize (Reset), Default Elements, Grid, Variables
Components
• User interface concepts & design patterns
Alerts, Buttons, Forms, List, Pagination, Tooltips
Modules
• Business logic
Aside, Header, Footer

16. @shayhoweModular HTML & CSS
TECHNIQUE

17. @shayhoweModular HTML & CSS
MODULARITY

18. @shayhoweModular HTML & CSS
ASSEMBLE LAYOUT
• Separate presentation (or theme) from layout
• Create an object layer for layout
• Create a skin layer for theme
• Use a grid

19. @shayhoweModular HTML & CSS
ASSEMBLE LAYOUT
Bad
.news
{
background:
#eee;
color:
#666;
margin:
0
10px;
width:
400px;
}
<div
class="news">...</div>

20. @shayhoweModular HTML & CSS
ASSEMBLE LAYOUT
Good
.grid-­‐4
{
margin:
0
10px;
width:
400px;
}
.feat-­‐box
{
background:
#eee;
color:
#666;
}
<div
class="grid-­‐4
feat-­‐box">...</div>

21. @shayhoweModular HTML & CSS
ACCOMMODATE CONTENT
• Separate content from container
• Stylize content regardless of container

22. @shayhoweModular HTML & CSS
ACCOMMODATE CONTENT
Bad
.alert
{
background:
#f2dede;
border-­‐radius:
10px;
color:
#b94a48;
padding:
10px
20px;
}
<div
class="alert">...</div>

23. @shayhoweModular HTML & CSS
ACCOMMODATE CONTENT
Good
.alert
{
border-­‐radius:
10px;
padding:
10px
20px;
}
.alert-­‐error
{
background:
#f2dede;
color:
#b94a48;
}
<div
class="alert
alert-­‐error">...</div>

24. @shayhoweModular HTML & CSS
AVOID PARENT DEPENDENCY
• Remove parent container dependency
• Decouple CSS from HTML
• Create components to be used anywhere

25. @shayhoweModular HTML & CSS
AVOID PARENT DEPENDENCY
Bad
.feat-­‐box
{
background:
#eee;
}
article
.feat-­‐box
{
background:
#fff;
}
<article>
<div
class="feat-­‐box">...</div>
</article>

26. @shayhoweModular HTML & CSS
AVOID PARENT DEPENDENCY
Good
.feat-­‐box
{
background:
#eee;
}
.feat-­‐box-­‐alt
{
background:
#fff;
}
<article>
<div
class="feat-­‐box-­‐alt">...</div>
</article>

27. @shayhoweModular HTML & CSS
FAVOR SEMANTICS
• Allow elements to adapt
• Uses individual classes to extend modules

28. @shayhoweModular HTML & CSS
FAVOR SEMANTICS
Bad
.feat-­‐box
h2
{
color:
#f60;
font:
18px
Helvetica,
sans-­‐serif;
}
<div
class="feat-­‐box">
<h2>...</h2>
</div>

29. @shayhoweModular HTML & CSS
FAVOR SEMANTICS
Good
.feat-­‐subhead
{
color:
#f60;
font:
18px
Helvetica,
sans-­‐serif;
}
<div
class="feat-­‐box">
<h2
class="feat-­‐subhead">...</h2>
</div>

30. @shayhoweModular HTML & CSS
MEASURING SPECIFICITY
Formula
• IDs, Classes/Pseudo-classes/Attributes, Elements
High Specificity (Bad)
#primary
#main
div.gallery
figure.media
IDs: 2, Classes: 2, Elements: 2 — Compiled: 2–2–2
Low Specificity (Good)
.gallery-­‐media
IDs: 0, Classes: 1, Elements: 0 — Compiled: 0–1–0

31. @shayhoweModular HTML & CSS

32. @shayhoweModular HTML & CSS
WATCH SPECIFICITY
• Be explicit
• Keep specificity low
• Never use IDs or !important
• Avoid nested selectors (#main
.spotlight
strong
span)

33. @shayhoweModular HTML & CSS
WATCH SPECIFICITY
Bad
#primary
#main
div.gallery
{
text-­‐transform:
uppercase;
}
#primary
#main
div.gallery
figure.media
{
background:
#ccc;
}

34. @shayhoweModular HTML & CSS
WATCH SPECIFICITY
Good
.gallery
{
text-­‐transform:
uppercase;
}
.gallery-­‐media
{
background:
#ccc;
}

35. @shayhoweModular HTML & CSS
USE CLASSES
• Write understandable class names
• Avoid unnecessary nesting
• Use same strength specificity

36. @shayhoweModular HTML & CSS
USE CLASSES
Bad
.feat-­‐box
.callout
.pr
{
font-­‐size:
12px;
}
.feat-­‐box
.callout
.pr
.un
{
color:
#39f;
}

37. @shayhoweModular HTML & CSS
USE CLASSES
Good
.feat-­‐box
.price
{
font-­‐size:
12px;
}
.feat-­‐box
.unit
{
color:
#39f;
}

38. @shayhoweModular HTML & CSS
USE CLASSES
Bad
.btn.large
{
font-­‐size:
24px;
padding:
15px
30px;
}
<div
class="btn
large">...</div>

39. @shayhoweModular HTML & CSS
USE CLASSES
Good
.btn-­‐large
{
font-­‐size:
24px;
padding:
15px
30px;
}
<div
class="btn-­‐large">...</div>

40. @shayhoweModular HTML & CSS
METHODOLOGIES
OOCSS
• Object-Oriented CSS
From Nicole Sullivan – oocss.org
SMACSS
• Scalable and Modular Architecture for CSS
From Jonathan Snook – smacss.com

41. @shayhoweModular HTML & CSS
PERFORMANCE

42. @shayhoweModular HTML & CSS
REUSE CODE
• Do not duplicate code
• Remove old code
• Defer loading subsequent styles

43. @shayhoweModular HTML & CSS
REUSE CODE
Bad
.news
{
background:
#eee;
color:
#666;
}
.social
{
background:
#eee;
color:
#666;
}

44. @shayhoweModular HTML & CSS
REUSE CODE
Good
.news,
.social
{
background:
#eee;
color:
#666;
}
Better
.feat-­‐box
{
background:
#eee;
color:
#666;
}

45. @shayhoweModular HTML & CSS
MINIMIZE REQUEST
• Combine like files (CSS & JS)
• Use image sprites
• Leverage data URIs
• Icon fonts

46. @shayhoweModular HTML & CSS
IMAGE SPRITES
<span
class="icon
i-­‐twitter">...</span>
<span
class="icon
i-­‐facebook">...</span>
.icon
{
background:
url("icons.png")
0
0
no-­‐repeat;
}
.i-­‐twitter
{
background-­‐position:
0
-­‐16px;
}
.i-­‐facebook
{
background-­‐position:
0
-­‐32px;
}

47. @shayhoweModular HTML & CSS
DATA URIS
HTML
<img
height="100"
width="660"
alt="Pattern"
src="data:imagepng;base64,...">
CSS
.pattern
{
background:
url("data:imagepng;base64,...")
repeat;
}

48. @shayhoweModular HTML & CSS
COMPRESS & CACHE FILES
• Utilize Gzip compression
• Losslessly compress images
• Cache common files

49. COMPRESS & CACHE FILES

50. @shayhoweModular HTML & CSS
COMPRESS & CACHE FILES

51. @shayhoweModular HTML & CSS
COMPRESS & CACHE FILES
Original 455kb Optimized 401kb

52. Ships on the Roadstead by Willem van de Velde the Younger

53. @shayhoweModular HTML & CSS
GETTING STARTED
Build a styleguide
• Twitter Bootstrap, Zurb Foundation
Review methodologies
• OOCSS, SMACSS
Test your code
• CSS Lint, Inspector, PageSpeed

55. @shayhoweModular HTML & CSS
THANK YOU!
Questions?
@shayhowe
http://learn.shayhowe.com
http://bit.ly/mod-html-css