This document discusses moving toward more modular and reusable HTML and CSS structures. It outlines problems with current practices like code becoming brittle and files swelling in size. It recommends abstracting structure from presentation using techniques like transparentizing elements, avoiding parent dependency, and favoring semantics. The document provides examples of bad and good practices and emphasizes keeping specificity low and code maintainable. The goal is building flexible and extensible components rather than pages to improve standards and reusability.

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

2. @shayhoweModular HTML & CSS
Shay Howe
@shayhowe
learn.shayhowe.com

3. @shayhoweModular HTML & CSS
1. The Problem
2. Groundwork
3. Assembling Layout
4. Accommodating Content
5. Onward
OUR SCHEDULE

4. @shayhoweModular HTML & CSS
THE
PROBLEM

5. The Gust by Willem van de Velde the Younger

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

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

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

9. @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
{...}

10. @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;
}

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

12. @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

13. @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

14. @shayhoweModular HTML & CSS

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

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

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

18. Parade of the Black Sea Fleet by Ivan Aivazovsky

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

20. @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

21. @shayhoweModular HTML & CSS
GROUNDWORK

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

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

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

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

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

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

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

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

30. @shayhoweModular HTML & CSS
ASSEMBLING
LAYOUT

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

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

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

34. @shayhoweModular HTML & CSS
TRANSPARENTIZE ELEMENTS
• Stylize elements to be transparent
• Keep visual properties apart from layout
properties

35. @shayhoweModular HTML & CSS
TRANSPARENTIZE ELEMENTS
Bad
.pagination
{
border-­‐radius:
5px;
border:
1px
solid
#eee;
margin:
0
10px;
width:
620px;
}
<ul
class="pagination">...</ul>

36. @shayhoweModular HTML & CSS
TRANSPARENTIZE ELEMENTS
Good
.grid-­‐8
{
margin:
0
10px;
width:
620px;
}
.offset-­‐box
{
border-­‐radius:
5px;
border:
1px
solid
#eee;
}
<ul
class="grid-­‐8
offset-­‐box">...</ul>

37. @shayhoweModular HTML & CSS
CREATE ADAPTABLE LAYOUTS
• Height and width should be flexible
• Height should extend with content
• Width should extend with a grid

38. @shayhoweModular HTML & CSS
CREATE ADAPTABLE LAYOUTS
Bad
#main
{
float:
left;
margin:
0
10px;
width:
620px;
}
#aside
{
float:
left;
margin:
0
10px;
width:
300px;
}

39. @shayhoweModular HTML & CSS
CREATE ADAPTABLE LAYOUTS
Good
.grid-­‐4,
.grid-­‐8
{
float:
left;
margin:
0
10px;
}
.grid-­‐4
{
width:
300px;
}
.grid-­‐8
{
width:
620px;
}

40. @shayhoweModular HTML & CSS
ASSEMBLING LAYOUT
IN PRACTICE
http://bit.ly/modular-html-css

41. @shayhoweModular HTML & CSS
ACCOMMODATING
CONTENT

42. @shayhoweModular HTML & CSS
SEPARATE CONTENT
• Separate content from container
• Stylize content regardless of container

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

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

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

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

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

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

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

50. @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>

51. @shayhoweModular HTML & CSS
ACCOMMODATING CONTENT
IN PRACTICE
http://bit.ly/modular-html-css

52. @shayhoweModular HTML & CSS
ONWARD

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

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

55. @shayhoweModular HTML & CSS
THEMES
• Decouple HTML and CSS
• Separate presentation from layout
• Separate content from container
• Extend elements with classes

56. @shayhoweModular HTML & CSS
OUTCOMES
• Maintainability!
• Reusable code, less duplication
• Flexibility and extensibility
• Improved standards

57. @shayhoweModular HTML & CSS
WHAT’S NEXT
Build a styleguide
• Twitter Bootstrap, Zurb Foundation
Review methodologies
• OOCSS, SMACSS
Test your code
• CSS Lint, Inspector, PageSpeed

58. @shayhoweModular HTML & CSS
THANK YOU!
Questions?
@shayhowe
http://learn.shayhowe.com