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