All too often writing HTML and CSS is an afterthought. Its the work that happens after design is finalized and the product has been developed. Its a necessary task in the process to building a website. Wrong.
HTML and CSS are the backbone to every website, and are equally as important as any design or development. At the end of the workshop and after spending time writing some of code attendees will be able to better organize their code, develop modular styles, and work with CSS specificity.
6. @shayhowe & @darbyfreyModular HTML & CSS
COMMON PROBLEMS
⢠Websites have difficulty scaling
⢠Code becomes brittle
⢠Files and code bases begin to swell
7. @shayhowe & @darbyfreyModular HTML & CSS
WHATâS WRONG
⢠Best practices arenât exactly best practices
⢠Standards need to evolve
8. @shayhowe & @darbyfreyModular HTML & CSS
BEST BAD PRACTICES
⢠Avoid extra elements
⢠Avoid classes
⢠Leverage type selectors
⢠Leverage descendent selectors
9. @shayhowe & @darbyfreyModular 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. @shayhowe & @darbyfreyModular 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. @shayhowe & @darbyfreyModular HTML & CSS
BEST BAD PRACTICES
Good
.col-Ââ1
 {
Â
 width:
 160px;
}
.col-Ââ2
 {
Â
 width:
 280px;
}
12. @shayhowe & @darbyfreyModular 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. @shayhowe & @darbyfreyModular 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
15. @shayhowe & @darbyfreyModular HTML & CSS
WATCH SPECIFICITY
⢠Be explicit
⢠Keep specificity low
⢠Never use IDs or !important
⢠Avoid nested selectors (#main
 .spotlight
 strong
 span)
16. @shayhowe & @darbyfreyModular HTML & CSS
WATCH SPECIFICITY
Bad
#primary
 #main
 div.gallery
 {
Â
 text-Ââtransform:
 uppercase;
}
#primary
 #main
 div.gallery
 figure.media
 {
Â
 background:
 #ccc;
}
17. @shayhowe & @darbyfreyModular HTML & CSS
WATCH SPECIFICITY
Good
.gallery
 {
Â
 text-Ââtransform:
 uppercase;
}
.gallery-Ââmedia
 {
Â
 background:
 #ccc;
}
20. @shayhowe & @darbyfreyModular HTML & CSS
METHODOLOGIES
OOCSS
⢠Object-Oriented CSS
From Nicole Sullivan â oocss.org
SMACSS
⢠Scalable and Modular Architecture for CSS
From Jonathan Snook â smacss.com
22. @shayhowe & @darbyfreyModular HTML & CSS
REUSE CODE
⢠Do not duplicate code
⢠Remove old code
⢠Defer loading subsequent styles
23. @shayhowe & @darbyfreyModular HTML & CSS
REUSE CODE
Bad
.news
 {
Â
 background:
 #eee;
Â
 color:
 #666;
}
.social
 {
Â
 background:
 #eee;
Â
 color:
 #666;
}
24. @shayhowe & @darbyfreyModular HTML & CSS
REUSE CODE
Good
.news,
.social
 {
Â
 background:
 #eee;
Â
 color:
 #666;
}
Better
.feat-Ââbox
 {
Â
 background:
 #eee;
Â
 color:
 #666;
}
25. @shayhowe & @darbyfreyModular HTML & CSS
USE CLASSES
⢠Write understandable class names
⢠Avoid unnecessary nesting
⢠Use same strength specificity
26. @shayhowe & @darbyfreyModular HTML & CSS
USE CLASSES
Bad
.feat-Ââbox
 .callout
 .pr
 {
Â
 font-Ââsize:
 12px;
}
.feat-Ââbox
 .callout
 .pr
 .un
 {
Â
 color:
 #39f;
}
27. @shayhowe & @darbyfreyModular HTML & CSS
USE CLASSES
Good
.feat-Ââbox
 .price
 {
Â
 font-Ââsize:
 12px;
}
.feat-Ââbox
 .unit
 {
Â
 color:
 #39f;
}
28. @shayhowe & @darbyfreyModular HTML & CSS
USE CLASSES
Bad
.btn.large
 {
Â
 font-Ââsize:
 24px;
Â
Â
Â
 padding:
 15px
 30px;
}
<div
 class="btn
 large">...</div>
29. @shayhowe & @darbyfreyModular HTML & CSS
USE CLASSES
Good
.btn-Ââlarge
 {
Â
 font-Ââsize:
 24px;
Â
 padding:
 15px
 30px;
}
<div
 class="btn-Ââlarge">...</div>
31. @shayhowe & @darbyfreyModular 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. @shayhowe & @darbyfreyModular HTML & CSS
ABSTRACT STRUCTURE
Bad
.news
 {
Â
 background:
 #eee;
Â
 color:
 #666;
Â
 margin:
 0
 10px;
Â
 width:
 400px;
}
<div
 class="news">...</div>
33. @shayhowe & @darbyfreyModular 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. @shayhowe & @darbyfreyModular HTML & CSS
TRANSPARENTIZE ELEMENTS
⢠Stylize elements to be transparent
⢠Keep visual properties apart from layout
properties
35. @shayhowe & @darbyfreyModular HTML & CSS
TRANSPARENTIZE ELEMENTS
Bad
.pagination
 {
Â
 border-Ââradius:
 5px;
Â
 border:
 1px
 solid
 #eee;
Â
 margin:
 0
 10px;
Â
 width:
 620px;
}
<ul
 class="pagination">...</ul>
36. @shayhowe & @darbyfreyModular 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. @shayhowe & @darbyfreyModular HTML & CSS
CREATE ADAPTABLE LAYOUTS
⢠Height and width should be flexible
⢠Height should extend with content
⢠Width should extend with a grid
38. @shayhowe & @darbyfreyModular HTML & CSS
CREATE ADAPTABLE LAYOUTS
Bad
#main
 {
Â
 float:
 left;
Â
 margin:
 0
 10px;
Â
 width:
 620px;
}
#aside
 {
Â
 float:
 left;
Â
 margin:
 0
 10px;
Â
 width:
 300px;
}
39. @shayhowe & @darbyfreyModular HTML & CSS
CREATE ADAPTABLE LAYOUTS
Good
.grid-Ââ4,
.grid-Ââ8
 {
Â
 float:
 left;
Â
 margin:
 0
 10px;
}
.grid-Ââ4
 {
Â
 width:
 300px;
}
.grid-Ââ8
 {
Â
 width:
 620px;
}
42. @shayhowe & @darbyfreyModular HTML & CSS
SEPARATE CONTENT
⢠Separate content from container
⢠Stylize content regardless of container
43. @shayhowe & @darbyfreyModular HTML & CSS
SEPARATE CONTENT
Bad
.alert
 {
Â
 background:
 #f2dede;
Â
 border-Ââradius:
 10px;
Â
 color:
 #b94a48;
Â
 padding:
 10px
 20px;
}
<div
 class="alert">...</div>
44. @shayhowe & @darbyfreyModular 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. @shayhowe & @darbyfreyModular HTML & CSS
AVOID PARENT DEPENDENCY
⢠Remove parent container dependency
⢠Decouple CSS from HTML
⢠Create components to be used anywhere
46. @shayhowe & @darbyfreyModular HTML & CSS
AVOID PARENT DEPENDENCY
Bad
.feat-Ââbox
 {
Â
 background:
 #eee;
}
article
 .feat-Ââbox
 {
Â
 background:
 #fff;
}
<article>
Â
 <div
 class="feat-Ââbox">...</div>
</article>
47. @shayhowe & @darbyfreyModular HTML & CSS
AVOID PARENT DEPENDENCY
Good
.feat-Ââbox
 {
Â
 background:
 #eee;
}
.feat-Ââbox-Ââalt
 {
Â
 background:
 #fff;
}
<article>
Â
 <div
 class="feat-Ââbox-Ââalt">...</div>
</article>
48. @shayhowe & @darbyfreyModular HTML & CSS
FAVOR SEMANTICS
⢠Allow elements to adapt
⢠Uses individual classes to extend modules
49. @shayhowe & @darbyfreyModular HTML & CSS
FAVOR SEMANTICS
Bad
.feat-Ââbox
 h2
 {
Â
 color:
 #f60;
Â
 font:
 18px
 Helvetica,
 sans-Ââserif;
}
<div
 class="feat-Ââbox">
Â
 <h2>...</h2>
</div>
50. @shayhowe & @darbyfreyModular HTML & CSS
FAVOR SEMANTICS
Good
.feat-Ââsubhead
 {
Â
 color:
 #f60;
Â
 font:
 18px
 Helvetica,
 sans-Ââserif;
}
<div
 class="feat-Ââbox">
Â
 <h2
 class="feat-Ââsubhead">...</h2>
</div>
54. @shayhowe & @darbyfreyModular HTML & CSS
SCSS
⢠CSS preprocessor
⢠Extension of CSS3
⢠Compiled using Ruby
⢠Adds nested rules, variables, mixins, selector
inheritance, and more
55. @shayhowe & @darbyfreyModular HTML & CSS
SCSS
SCSS Syntax
.new
 {
Â
 color:
 #f60;
Â
 .item
 {
Â
Â
Â
 font-Ââsize:
 24px;
Â
 }
}
Compiled CSS
.new
 {
Â
 color:
 #f60;
}
.new
 .item
 {
Â
 font-Ââsize:
 24px;
}
56. @shayhowe & @darbyfreyModular HTML & CSS
SCSS VS. SASS
SCSS Syntax
.new
 {
Â
 color:
 #f60;
Â
 .item
 {
Â
Â
Â
 font-Ââsize:
 24px;
Â
 }
}
Sass Syntax
.new
Â
 color:
 #f60
Â
 .item
Â
Â
Â
 font-Ââsize:
 24px
57. @shayhowe & @darbyfreyModular HTML & CSS
COMPASS
⢠Built on top of Sass
⢠Includes reusable patterns
⢠Provides cross browser CSS3 mixins
58. @shayhowe & @darbyfreyModular HTML & CSS
SCOUT APP
⢠GUI for compiling Sass and Compass
⢠Available for both Mac and Windows
63. @shayhowe & @darbyfreyModular HTML & CSS
PARTIALS
⢠Must begin with an underscore, _
⢠Must have a file extension of .scss, not .css.scss
64. @shayhowe & @darbyfreyModular HTML & CSS
IMPORTS
workshop.css.scss
//
 Compass
@import
 "compass/css3";
//
 Settings
@import
 "settings/variables";
//
 Base
@import
 "base/layout";
...
67. @shayhowe & @darbyfreyModular HTML & CSS
VARIABLES
⢠Allow common values to be shared
⢠Assigned with a dollar sign, name, colon, and value
⢠May be a number, string, boolean, null, or multiple
comma separated values
68. @shayhowe & @darbyfreyModular HTML & CSS
VARIABLES
SCSS Syntax
$font-Ââbase:
 14px;
$sans-Ââserif:
 "Open
 Sans",
 sans-Ââserif;
p
 {
Â
 font:
 $font-Ââbase
 $sans-Ââserif;
}
Compiled CSS
p
 {
Â
 font:
 14px
 "Open
 Sans",
 sans-Ââserif;
}
69. @shayhowe & @darbyfreyModular HTML & CSS
EXTENDS
⢠Share common styles without duplicating them
⢠Keep code weight low
⢠Generates detailed selectors
⢠Assigned with the @extend
 rule followed by the
selector
70. @shayhowe & @darbyfreyModular HTML & CSS
EXTENDS
SCSS Syntax
.alert
 {
Â
 border-Ââradius:
 10px;
}
.alert-Ââerror
 {
Â
 @extend
 .alert;
Â
 color:
 #b94a48;
}
.alert-Ââsuccess
 {
Â
 @extend
 .alert;
Â
 color:
 #468847;
}
Compiled CSS
.alert,
.alert-Ââerror,
.alert-Ââsuccess
 {
Â
 border-Ââradius:
 10px;
}
.alert-Ââerror
 {
Â
 color:
 #b94a48;
}
.alert-Ââsuccess
 {
Â
 color:
 #468847;
}
71. @shayhowe & @darbyfreyModular HTML & CSS
PLACEHOLDERS
⢠Similar to extends
⢠Selector is assigned with a percentage sign
⢠Extended selector is not output, only the styles
72. @shayhowe & @darbyfreyModular HTML & CSS
PLACEHOLDERS
SCSS Syntax
%alert
 {
Â
 border-Ââradius:
 10px;
}
.alert-Ââerror
 {
Â
 @extend
 %alert;
Â
 color:
 #b94a48;
}
.alert-Ââsuccess
 {
Â
 @extend
 %alert;
Â
 color:
 #468847;
}
Compiled CSS
.alert-Ââerror,
.alert-Ââsuccess
 {
Â
 border-Ââradius:
 10px;
}
.alert-Ââerror
 {
Â
 color:
 #b94a48;
}
.alert-Ââsuccess
 {
Â
 color:
 #468847;
}
73. @shayhowe & @darbyfreyModular HTML & CSS
MIXINS
⢠Share similar styles based off given arguments
⢠Duplicates properties, providing different values
⢠Assigned with the @mixin
 rule followed by the
name and arguments
74. @shayhowe & @darbyfreyModular HTML & CSS
MIXINS
SCSS Syntax
@mixin
 btn($color)
 {
Â
Â
 color:
 $color;
}
.btn
 {
Â
 @mixin
 btn(#f60);
}
Compiled CSS
.btn
 {
Â
 color:
 #f60;
}
77. @shayhowe & @darbyfreyModular HTML & CSS
COMMENTS
⢠Two different types of comments
⢠Standard CSS comments as normal
⢠Silent comments, assigned with two forward
slashes, not compiled in the output
78. @shayhowe & @darbyfreyModular HTML & CSS
COMMENTS
SCSS Syntax
/*
 Normal
 comment
 */
.awesome
 {
Â
 color:
 #3276b1;
}
//
 Omitted
 comment
.very-Ââawesome
 {
Â
 color:
 #47a447;
}
Compiled CSS
/*
 Normal
 comment
 */
.awesome
 {
Â
 color:
 #3276b1;
}
.very-Ââawesome
 {
Â
 color:
 #47a447;
}
79. @shayhowe & @darbyfreyModular HTML & CSS
PARENT SELECTOR
⢠Add styles to a previous selector
⢠Commonly used with pseudo classes
⢠Assigned with an ampersand
⢠May also be used as the key selector
80. @shayhowe & @darbyfreyModular HTML & CSS
PARENT SELECTOR
SCSS Syntax
a
 {
Â
 color:
 #8ec63f;
Â
 &:hover
 {
Â
Â
Â
 color:
 #f7941d;
Â
 }
}
Compiled CSS
a
 {
Â
 color:
 #8ec63f;
}
a:hover
 {
Â
 color:
 #f7941d;
}
81. @shayhowe & @darbyfreyModular HTML & CSS
INTERPOLATION
⢠Occasionally SCSS need to be interpolated
⢠Most commonly happens as part of a class name,
property name, or inside a string plain text
⢠Assigned by placing the value inside #{...}
82. @shayhowe & @darbyfreyModular HTML & CSS
INTERPOLATION
SCSS Syntax
$logo:
 twitter;
$offset:
 left;
.#{$logo}
 {
Â
 #{$offset}:
 20px;
}
Compiled CSS
.twitter
 {
Â
 left:
 20px;
}
85. @shayhowe & @darbyfreyModular HTML & CSS
OUTPUT STYLES
⢠SCSS has multiple output styles
⢠Nested or expanded is best for development
⢠Compact or compressed is best for production
88. Ships on the Roadstead by Willem van de Velde the Younger
89. @shayhowe & @darbyfreyModular HTML & CSS
APPROACH
⢠Stop thinking about pages
⢠Start thinking about components
⢠Take visual inventory
90. @shayhowe & @darbyfreyModular HTML & CSS
THEMES
⢠Decouple HTML and CSS
⢠Separate presentation from layout
⢠Separate content from container
⢠Extend elements with classes
91. @shayhowe & @darbyfreyModular HTML & CSS
OUTCOMES
⢠Maintainability!
⢠Reusable code, less duplication
⢠Flexibility and extensibility
⢠Improved standards
92. @shayhowe & @darbyfreyModular HTML & CSS
WHATâS NEXT
Build a style guide
⢠Twitter Bootstrap, Zurb Foundation
Review methodologies
⢠OOCSS, SMACSS
Test your code
⢠CSS Lint, Inspector, PageSpeed