Meaningful CSS

CSS is becoming more powerful and more complex every year. Our designs are the best they have ever been, but the code to build them is out of control: a minefield of browser inconsistencies and secret workarounds, repetitive and inefficient declarations, and hidden meanings.

That's no way to write maintainable code.

It's time to move front-end development into the present with DRY, modular code. What if you could write CSS that made sense, everyone could read, and you could share it across projects, all without repeating yourself throughout the document? What if you could call a column a column and leave it at that?

You can. With the abstractions available in pre-processors, you can create and share simple tools that make CSS more specific, simple, and concrete than ever before. I'll show you how tools like Sass, Compass, and Susy can make your CSS workflow, maintenance, and learning-curve easier for developers at every level.

Transcript

1. MEANINGFUL CSS FOR A HUMANE WEB BY ERIC A. MEYER Tuesday, April 24, 12
2. ERIC A. MEYER MULTIMEDIA ARTIST+DEVELOPER ODDBIRD | COMPASS | SUSY eric.andmeyer.com | oddbird.net 108625 eriiicam ericam Tuesday, April 24, 12
3. INSPIRED BY NATALIE DOWNE’S 2008 CSS SYSTEMS http://www.slideshare.net/nataliedowne/css-systems-presentation Tuesday, April 24, 12
4. DEFINE THE PROBLEM. EMBRACE THE MEDIUM: Write meaningful code. [sass] Join the community. [compass] Design for differences. [susy] DEVELOP YOUR SYSTEM. Tuesday, April 24, 12
5. DEFINE THE PROBLEM. Tuesday, April 24, 12
6. Work as a team. Write robust + versatile code. On tight deadlines. Hand it off to other developers. Maintain it over several years. Tuesday, April 24, 12
7. DO IT ALL AGAIN. Tuesday, April 24, 12
8. YOU NEED A SYSTEM. Tuesday, April 24, 12
9. Shared vocabulary, patterns, and code. Overall structure + Individual components. Consistent across projects. Customized for each. Tuesday, April 24, 12
10. OOCSS [Nicole Sullivan | http://oocss.org/] Bootstrap [Twitter | http://twitter.github.com/bootstrap/] SMACSS [Jonathan Snook : http://smacss.com/] HTML5 Boilerplate [Paul Irish + Divya Manian | http://html5boilerplate.com/] ... Tuesday, April 24, 12
11. Start with guiding principles. Consider the process. Notice the patterns. Define abstracted modules. Tuesday, April 24, 12
12. DEFINE, DEVELOP, MAINTAIN, AND COMMUNICATE. Tuesday, April 24, 12
13. DEFINE THE PROBLEM. EMBRACE THE MEDIUM: Write meaningful code. [sass] Join the community. [compass] Design for differences. [susy] DEVELOP YOUR SYSTEM. Tuesday, April 24, 12
14. EMBRACE THE MEDIUM. Tuesday, April 24, 12
15. The World Wide Web. HyperText Markup Language. Cascading Style Sheets. Tuesday, April 24, 12
16. W3C One web. Web for all. Web on everything. Tuesday, April 24, 12
17. THERE IS NO NORMAL. Design for the differences. Tuesday, April 24, 12
18. STANDARDS. CONTENT CREATORS + WEB TECHNOLOGY DEVELOPERS + BROWSER COMPANIES. Tuesday, April 24, 12
19. WE’RE BUILDING IT TOGETHER. Join the community. Tuesday, April 24, 12
20. HTML HyperText Markup Language Tuesday, April 24, 12
21. A WEB OF META-DATA. Write meaningful code. Tuesday, April 24, 12
22. CSS Flow, Inheritance, Cascade. Tuesday, April 24, 12
23. ABSTRACTED LAYERS. Content + tags + outline + taxonomy + style. Tuesday, April 24, 12
24. DEFINE THE PROBLEM. EMBRACE THE MEDIUM: Write meaningful code. [sass] Join the community. [compass] Design for differences. [susy] DEVELOP YOUR SYSTEM. Tuesday, April 24, 12
25. WRITE MEANINGFUL CODE. Tuesday, April 24, 12
26. CSS IS SIMPLE. Selectors { Properties: Values; } + Cascade Tuesday, April 24, 12
27. CSS IS SIMPLY CRAZY. 33 NEW SELECTORS, 120+ NEW PROPERTIES, 3 NEW @-RULES, ENHANCED MEDIA QUERIES, VENDOR PREFIXES, BROWSER DIFFERENCES, LEGACY HACKS, NO LAYOUT MODULE... Tuesday, April 24, 12
28. HTTP://WWW.FLICKR.COM/PHOTOS/MIKEPMILLER/5673913884/ Tuesday, April 24, 12
29. Adding any form of macros or additional scopes and indirections, including symbolic constants... changes CSS in ways that make it unsuitable for its intended audience. —BERT BOSS, JUNE 2008 HTTP://WWW.W3.ORG/PEOPLE/BOS/CSS-VARIABLES Tuesday, April 24, 12
30. FFD8 FFE0 0010 4A46 4946 0001 0100 0001 0001 0000 FFFE 003B 4352 4541 544F 523A 2067 642D 6A70 6567 2076 312E 3020 2875 7369 6E67 2049 4A47 204A 5045 4720 7636 3229 2C20 7175 616C 6974 7920 3D20 3835 0AFF DB00 4300 0503 0404 0403 0504 0404 0505 0506 070C 0807 0707 070F 0B0B 090C 110F 1212 110F 1111 1316 1C17 1314 1A15 1111 1821 181A 1D1D 1F1F 1F13 1722 2422 1E24 1C1E 1F1E FFDB 0043 0105 0505 0706 070E 0808 0E1E 1411 141E 1E1E 1E1E 1E1E 1E1E 1E1E 1E1E 1E1E 1E1E 1E1E 1E1E 1E1E 1E1E 1E1E 1E1E 1E1E 1E1E 1E1E 1E1E 1E1E 1E1E 1E1E 1E1E 1E1E 1E1E 1EFF C000 1108 011F 0198 0301 2200 0211 0103 1101 FFC4 001F 0000 0105 0101 0101 0101 0000 0000 0000 0000 0102 0304 0506 0708 090A 0BFF C400 B510 0002 0103 0302 0403 0505 0404 0000 017D 0102 0300 0411 0512 2131 4106 1351 6107 2271 1432 8191 A108 2342 B1C1 1552 D1F0 2433 6272 8209 SIMPLE != HUMANE. .col2of6 { float: left; display: inline; width: 31.707%; margin-right: 2.439%; } /* where is col2of6? */ /* why do we float it? */ /* what? */ /* where’s that % from? */ /* another one? */ Tuesday, April 24, 12
31. MEANINGFUL == HUMANE. .col2of6 { float: left; display: inline; width: 31.707%; margin-right: 2.439%; } .article { @include columns(2); } HTTP://WWW.FLICKR.COM/PHOTOS/NICSUZOR/2554668884/ Tuesday, April 24, 12
32. THE MEANING PROBLEM: Repetition is hard to maintain. .meaning { padding: 1.5em; background: #d33682; color: #080205; } .meaning > h3 { margin: -1.5em; margin-bottom: 1.5em; padding: 1.5em; background: rgba(8, 2, 5, 0.5); color: #d33682; } Tuesday, April 24, 12
33. THE MEANING PROBLEM: Repetition is hard to maintain. Relationships are hidden. .meaning { padding: 1.5em; background: #d33682; color: #080205; } .meaning > h3 { margin: -1.5em; margin-bottom: 1.5em; padding: 1.5em; background: rgba(8, 2, 5, 0.5); color: #d33682; } Tuesday, April 24, 12
34. THE MEANING PROBLEM: Repetition is hard to maintain. Relationships are hidden. Reasons are unclear. .meaning { padding: 1.5em; background: #d33682; color: #080205; } .meaning > h3 { margin: -1.5em; margin-bottom: 1.5em; padding: 1.5em; background: rgba(8, 2, 5, 0.5); color: #d33682; } Tuesday, April 24, 12
35. Dear W3C, We rely on advanced text editors, calculators, color pickers and widgets to make writing CSS bearable. Throw us a frickin' bone! —DUŠKO ANGIREVIĆ [@DYSKO], FEB 2012 HTTPS://TWITTER.COM/#!/DYSKO/STATUSES/173037423520002048 Tuesday, April 24, 12
36. SHOW YOUR WORK. Tuesday, April 24, 12
37. CSS + Meaningful Abstraction HTTP://SASS-LANG.COM/ HAMPTON CATLIN + NATHAN WEIZENBAUM + CHRIS EPPSTEIN SASS Tuesday, April 24, 12
38. .cat { background: url(‘cat.png’); color: #fdf6e3; } .CSS Tuesday, April 24, 12
39. .SCSS .cat { background: url(‘cat.png’); color: #fdf6e3; } Tuesday, April 24, 12
40. CATCH CSS ERRORS 20 .cat { 21 background: url(‘cat.png’) 22 color: #fdf6e3; 23 } /* Syntax error: Invalid CSS after " color": expected ";", was ": #fdf6e3;" on line 22 of screen.scss */ Tuesday, April 24, 12
41. /* css -------------------- */ .nesting p { margin: .75em; } .nesting > h3 { color: #d33682; } .nesting:target { color: #fff; } .no-rgba .nesting { color: #000; } /* scss ------------------- */ .nesting { p { margin: .75em; } > h3 { color: #d33682; } &:target { color: #fff; } .no-rgba & { color: #000; } } MEANINGFUL SELECTORS Nesting, parent selector, and @extend. .demo { padding: 1.5em; } .meaning { @extend .demo; } .article { @extend .demo; } .demo, .meaning, .article { padding: 1.5em; } Tuesday, April 24, 12
42. /* css -------------------- */ .meaning { padding: 1.5em; } @media (min-width: 30em) { .meaning { padding: 0.5em; } } /* scss ------------------- */ .meaning { padding: 1.5em; @media (min-width: 30em) { padding: 0.5em; } } MEANINGFUL @MEDIA Bubbling preserves context, avoids repetition. Tuesday, April 24, 12
43. MEANINGFUL PROPERTIES Mixins. /* css ---------------------- */ .meaning { -webkit-border-radius: 0.5em; -moz-border-radius: 0.5em; -ms-border-radius: 0.5em; -o-border-radius: 0.5em; border-radius: 0.5em; } /* scss --------------------- */ .meaning { @include border-radius(.5em); } Tuesday, April 24, 12
44. /* css -------------------- */ .meaning { padding: .75em; background: #d33682; color: #080205; } .meaning > h3 { margin: -.75em; margin-bottom: .75em; padding: .75em; background: rgba(8,2,5,0.5); color: #d33682; } /* scss ------------------- */ $rhythm : 1.5em; $padding : $rhythm / 2; $bg : #d33682; $text : darken($bg,50); .meaning { padding: $padding; background: $bg; color: $text; > h3 { margin: - $padding; margin-bottom: $padding; padding: $padding; background: rgba($text,.5); color: $bg; } } MEANINGFUL VALUES Variables, math, logic, and functions. Tuesday, April 24, 12
45. /* _reset.scss -------- */ .reset { ... } /* _layout.scss ------- */ .layout { ... } /* _module.scss ------- */ .module { ... } /* screen.scss -------- */ @import “reset”; @import “layout”; @import “module”; MEANINGFUL ORGANIZATION Importing partials. Tuesday, April 24, 12
46. CSS VARIABLES MODULE LEVEL 1. W3C Working Draft 10 April 2012. Thank you, Tab Atkins! HTTP://WWW.W3.ORG/TR/2012/WD-CSS-VARIABLES-20120410/ Tuesday, April 24, 12
47. DEFINE THE PROBLEM. EMBRACE THE MEDIUM: Write meaningful code. [sass] Join the community. [compass] Design for differences. [susy] DEVELOP YOUR SYSTEM. Tuesday, April 24, 12
48. JOIN THE COMMUNITY. Tuesday, April 24, 12
49. Style Authoring Framework COMPASS HTTP://COMPASS-STYLE.ORG CHRIS EPPSTEIN + BRANDON MATHIS + ERIC MEYER + SCOTT DAVIS + NICO HAGENBURGER + ANTHONY SHORT Tuesday, April 24, 12
50. BUILD, SHARE, AND IMPORT. Tools by and for web designers. Tuesday, April 24, 12
51. COMPASS IS PROJECT AWARE Let Compass handle your assets. # config.rb -------------------/ http_path = "/" css_dir = "stylesheets" sass_dir = "sass" images_dir = "images" fonts_dir = "fonts" javascripts_dir = "js" output_style = :compact relative_assets = true line_comments = false /* scss --------------------- */ a[href*='github'] { display: block; background: image-url('github.png') no-repeat left; min-height: image-height('github.png'); padding-left: image-width('github.png') + 6px; } /* css ---------------------------------------------------------- */ a[href*='github'] { display: block; background: url('../images/github.png?1334968268') no-repeat left; min-height: 24px; padding-left: 30px;} Tuesday, April 24, 12
52. SPRITES THAT DON’T SUCK Let Compass handle your assets. File Structure ----------------/ images/ social/ dribbble.png github.png twitter.png /* scss ----------------------*/ @import "social/*.png"; @include all-social-sprites; /* css ---------------------- */ .social-sprite, .social- dribbble, .social- github, .social-twitter { background: url('../images/ social-s9c30a47a32.png') no-repeat; } .social-dribbble { background-position: 0 0; } .social-github { background-position: 0 -24px; } .social-twitter { background-position: 0 -72px; } Tuesday, April 24, 12
53. CSS3. Animations, Appearance, Background Clip, Background Origin, Background Size, Border Radius, Box Shadow, Box Sizing, CSS3 Pie, Columns, Font Face, Images, Inline Block, Opacity, Shared Utilities, Text Shadow, Transform, Transition, and User Interface. Helpers. Color functions, math, browser-support, and asset handling. Layout. Grid Background, Sticky Footer, and Stretching. Reset [Eric Meyer]. Typography. Links, Lists, Text, and Vertical Rhythm. Utilities. Color, General, Print, Sprites, and Tables. Plugins... Tuesday, April 24, 12
54. OOCSS » Several. Bootstrap » Several. SMACSS » Just Do It. HTML5 Boilerplate » Several. CSS Systems » Susy. ... » Build Your Own! Tuesday, April 24, 12
55. gem install compass Tuesday, April 24, 12
56. DEFINE THE PROBLEM. EMBRACE THE MEDIUM: Write meaningful code. [sass] Join the community. [compass] Design for differences. [susy] DEVELOP YOUR SYSTEM. Tuesday, April 24, 12
57. DESIGN FOR DIFFERENCES. Tuesday, April 24, 12
58. The control which designers know in the print medium, and often desire in the web medium, is simply a function of the limitation of the printed page... We must “accept the ebb and flow of things.” —JOHN ALLSOPP, APRIL 2000 HTTP://WWW.ALISTAPART.COM/ARTICLES/DAO/ Tuesday, April 24, 12
59. THE WEB IS RESPONSIVE. How are you going to mange it? Tuesday, April 24, 12
60. WE NEED RESPONSIVE TOOLS. When all you have are classes and IDs... Tuesday, April 24, 12
61. A RESPONSIVE PROCESS. Start with why. Work out from there. Tuesday, April 24, 12
62. 1) ORGANIZED CONTENT. Static templates, markdown, and URLs. Tuesday, April 24, 12
63. 2) MEANINGFUL MARKUP. Structure, microformats, WAI-ARIA. Tuesday, April 24, 12
64. 3) INTERACTIVE WIREFRAMES. Mobile first, layout only, zen mind. Tuesday, April 24, 12
65. FLUID CENTER, CANDY SHELL. A fluid site can become anything. Tuesday, April 24, 12
66. width: 100%; width: 750px; width: 50em; Tuesday, April 24, 12
67. /* ------------------------------------------------------------- Span 6 columns of a 10-column grid... */ article { float: left; /* establish a column */ display: inline; /* fix double-margin bug */ width: 56.863%; /* (((6*4em)+((6-1)*1em))/51em)*100% */ margin-right: 1.961%; /* (1em/51em)*100% */ } Tuesday, April 24, 12
68. SUSY Responsive grids without math HTTP://SUSY.ODDBIRD.NET/ ERIC MEYER (ME) Tuesday, April 24, 12
69. /* ------------------------------------------------------------- Span 6 columns of a 10-column grid... */ article { @include columns(6); } Tuesday, April 24, 12
70. /* A Simple Susy Grid --------------------------------------- */ $total-cols : 10; .page { @include container; } header, footer { @include full; } nav { @include columns(4); @include alpha; } article { @include columns(6); @include omega; } Tuesday, April 24, 12
71. /* Susy 1.0 Coming Soon ------------------------------------- */ .page { @include container(4,10); } header, footer { @include at-breakpoint(10) { @include full; }; } @include at-breakpoint(10) { nav { @include columns(4 alpha); } article { @include columns(6 omega); } }; Tuesday, April 24, 12
72. DON’T FIGHT THE CASCADE. Organize CSS to avoid conflict. Tuesday, April 24, 12
73. A) ESTABLISH A BASE. Sass settings and imports. No output. Tuesday, April 24, 12
74. B) GENERAL OVERVIEW. Reset, normalize tag defaults, define helpers. Tuesday, April 24, 12
75. C) THE LAYOUT STRUCTURE. Establish grid structures with Susy. Tuesday, April 24, 12
76. D) NAMED MODULES. Class types by effect, ID’s by component. Tuesday, April 24, 12
77. 1. Components over pages. 2. Types over instances. 3. Classes over IDs. Tuesday, April 24, 12
78. E) OVERRIDES BY SECTION. A last resort, for the exceptions. Tuesday, April 24, 12
79. File Structure --------------/ base/ settings/ _grid.scss _colors.scss _fonts.scss extensions/ _lightboxes.scss general/ _reset.scss _defaults.scss _helpers.scss layout/ _banner.scss _nav.scss _contentinfo.scss modules/ effects/ _dropdown.scss components/ _news.scss overrides/ _admin.scss _home.scss The Cascade -----------------/ A) Base Settings Grids Colors Fonts Extensions Lightboxes B) General Reset Defaults Helpers C) Layout Banner Nav Content-info D) Modules Effects Dropdown Components News E) Overrides Admin Home Tuesday, April 24, 12
80. DOCUMENT AS YOU GO. Write style guides with KSS to @extend later. HTTP://WARPSPIRE.COM/POSTS/KSS/ Tuesday, April 24, 12
81. 4) DESIGN ELEMENTS. From modules out, from abstractions in. Tuesday, April 24, 12
82. 5) BROWSER CLEANUP. Don’t be surprised when you get here. Tuesday, April 24, 12
83. FEATURE SUPPORT. Modernizr, with fallback code in context. Tuesday, April 24, 12
84. /* scss -------------------------------------------------------- */ article { @include box-sizing(border-box); width: 45%; padding: 2%; .no-boxsizing & { width: 41%; padding: 2%; } } Tuesday, April 24, 12
85. CONDITIONAL COMMENTS. With fallback code in context. Tuesday, April 24, 12
86. <!doctype html> <!--[if lt IE 8]> <html class="lt-ie9 lt-ie8"> <![endif]--> <!--[if IE 8]> <html class="lt-ie9"> <![endif]--> <!--[if gt IE 8]><!--> <html> <!--<![endif]--> /* scss -------------------------------------------------------- */ .container { width: 20em; @media (min-width:50em) { width: 50em; } .lt-ie9 & { width: 50em; } } Tuesday, April 24, 12
87. DEFINE THE PROBLEM. EMBRACE THE MEDIUM: Write meaningful code. [sass] Join the community. [compass] Design for differences. [susy] DEVELOP YOUR SYSTEM. Tuesday, April 24, 12
88. BUILD YOUR SYSTEM. Tuesday, April 24, 12
89. Shared vocabulary, patterns, and code. Overall structure + Individual components. Consistent across projects. Customized for each. Tuesday, April 24, 12
90. Start with guiding principles. Consider the process. Notice the patterns. Define abstracted modules. Tuesday, April 24, 12
91. EMBRACE THE MEDIUM: Write meaningful code. [sass] Join the community. [compass] Design for differences. [susy] Tuesday, April 24, 12
92. DEFINE, DEVELOP, MAINTAIN, AND COMMUNICATE. Tuesday, April 24, 12
93. THANK YOU! Tuesday, April 24, 12
94. ERIC A. MEYER MULTIMEDIA ARTIST+DEVELOPER ODDBIRD | COMPASS | SUSY eric.andmeyer.com | oddbird.net 108625 eriiicam ericam Tuesday, April 24, 12