Meaningful CSS

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.

223747d1064bea33b66a83435823826a?s=128

Eric Meyer

May 02, 2012
Tweet

Transcript

  1. 2.

    ERIC A. MEYER MULTIMEDIA ARTIST+DEVELOPER ODDBIRD | COMPASS | SUSY

    eric.andmeyer.com | oddbird.net 108625 eriiicam ericam Tuesday, April 24, 12
  2. 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
  3. 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
  4. 9.

    Shared vocabulary, patterns, and code. Overall structure + Individual components.

    Consistent across projects. Customized for each. Tuesday, April 24, 12
  5. 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
  6. 11.

    Start with guiding principles. Consider the process. Notice the patterns.

    Define abstracted modules. Tuesday, April 24, 12
  7. 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
  8. 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
  9. 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
  10. 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
  11. 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
  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
  13. 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
  14. 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
  15. 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
  16. 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
  17. 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
  18. 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
  19. 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
  20. 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
  21. 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
  22. 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
  23. 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
  24. 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
  25. 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
  26. 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
  27. 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
  28. 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
  29. 54.

    OOCSS » Several. Bootstrap » Several. SMACSS » Just Do

    It. HTML5 Boilerplate » Several. CSS Systems » Susy. ... » Build Your Own! Tuesday, April 24, 12
  30. 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
  31. 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
  32. 60.
  33. 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
  34. 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
  35. 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
  36. 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
  37. 80.

    DOCUMENT AS YOU GO. Write style guides with KSS to

    @extend later. HTTP://WARPSPIRE.COM/POSTS/KSS/ Tuesday, April 24, 12
  38. 84.

    /* scss -------------------------------------------------------- */ article { @include box-sizing(border-box); width: 45%;

    padding: 2%; .no-boxsizing & { width: 41%; padding: 2%; } } Tuesday, April 24, 12
  39. 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
  40. 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
  41. 89.

    Shared vocabulary, patterns, and code. Overall structure + Individual components.

    Consistent across projects. Customized for each. Tuesday, April 24, 12
  42. 90.

    Start with guiding principles. Consider the process. Notice the patterns.

    Define abstracted modules. Tuesday, April 24, 12
  43. 91.

    EMBRACE THE MEDIUM: Write meaningful code. [sass] Join the community.

    [compass] Design for differences. [susy] Tuesday, April 24, 12
  44. 94.

    ERIC A. MEYER MULTIMEDIA ARTIST+DEVELOPER ODDBIRD | COMPASS | SUSY

    eric.andmeyer.com | oddbird.net 108625 eriiicam ericam Tuesday, April 24, 12