Write Better CSS

{ } CSS WRITE BETTER by Adam Kaplan

IMPORTANT? WHY IS GOOD CSS

EASIER TO READ

KEEPS YOUR FILES LIGHTWEIGHT

MAKES YOUR CSS REUSABLE

HOW DO YOU WRITE BETTER CSS?

RESET ORDER DRY UP 3 EASY { STEPS

All browsers have presentation defaults, but no browsers have the
same defaults. Eric Meyer

2 OPTIONS normalize.css necolas.github.io/normalize.css reset.css meyerweb.com/eric/tools/css/reset

reset.css /* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126
License: none (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-‐size: 100%; font: inherit; vertical-‐align: baseline; } { flattens ALL

reset.css

normalize.css /* =============================================== Base =============================================== */
/** * 1. Prevent system color scheme's background color being used in Firefox, IE, * and Opera. * 2. Prevent system color scheme's text color being used in Firefox, IE, and * Opera. * 3. Set default font family to sans-‐serif. * 4. Prevent iOS text size adjust after orientation change, without disabling * user zoom. */ html { background: #fff; /* 1 */ color: #000; /* 2 */ font-‐family: sans-‐serif; /* 3 */ -‐ms-‐text-‐size-‐adjust: 100%; /* 4 */ -‐webkit-‐text-‐size-‐adjust: 100%; /* 4 */ } /** * Remove default margin. */ body { margin: 0; } { explains CODE

normalize.css /* =============================================== Forms =============================================== */
/** * Define consistent border, margin, and padding. */ fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; } /** * 1. Correct font family not being inherited in all browsers. * 2. Correct font size not being inherited in all browsers. * 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome. */ input, select, textarea { font-‐family: inherit; /* 1 */ font-‐size: 100%; /* 2 */ margin: 0; /* 3 */ } corrects BUGS {

normalize.css 95% of that CSS is to keep various versions
of IE behaving, imagine how small the file would be without IE! normalize Website

INCLUDE AS SEPARATE FILES normalize.css base.css reset.css base.css

application.css base.css normalize.css consumers.css home.css questions.css users.css application.css normalize.css

/* ... *= require_self *= require_tree . */ /* ...
*= require_self *= require normalize *= require base */ application.css application.css RAILS ASSET PIPELINE <!-‐-‐ CSS -‐-‐> <link rel="stylesheet" href="/css/normalize.css" type="text/css" /> <link rel="stylesheet" href="/css/base.css" type="text/css" /> ORIGINAL FLA VOR layout.html

/* Layout -‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐ */ body { color: #333;
font-‐family: "proxima-‐nova", sans-‐serif; font-‐size: 100%; font-‐weight: 400; line-‐height: 1.5em; } .container { margin: 0 auto; max-‐width: 32em; padding: 1.5em 0; width: 90%; } /* Header -‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐ */ header { border-‐bottom: 1px solid #ddd; margin-‐bottom: 1.5em; } REFLECT THE FLOW OF YOUR WEBSITE group {

ALPHABETIZE box { z-‐index: 1; padding: 0.5em;
border: 1px solid #aaa; -‐moz-‐box-‐sizing: border-‐box; -‐webkit-‐box-‐sizing: border-‐box; box-‐sizing: border-‐box; width: 100%; margin-‐bottom: 1em; } box { border: 1px solid #aaa; -‐moz-‐box-‐sizing: border-‐box; -‐webkit-‐box-‐sizing: border-‐box; box-‐sizing: border-‐box; margin-‐bottom: 1em; padding: 0.5em; width: 100%; z-‐index: 1; }

GROUP box { border: 1px solid #aaa; -‐moz-‐box-‐sizing:
border-‐box; -‐webkit-‐box-‐sizing: border-‐box; box-‐sizing: border-‐box; margin-‐bottom: 1em; padding: 0.5em; width: 100%; z-‐index: 1; } { group vendor prefixes

Here’s the simple truth up-front: alphabetical CSS ordering makes your
CSS most easily accessible to the widest group of people ... Jen Meyers

DRY UP

Don’t REPEAT YOURSELF .tag-‐green { background: #66FF66; border:
1px solid #DDD; -‐moz-‐box-‐sizing: border-‐box; -‐webkit-‐box-‐sizing; border-‐box; box-‐sizing: border-‐box; display: inline-‐block; padding: 0.5em; width: 50%; } .tag-‐red { background: #FF3333; border: 1px solid #DDD; -‐moz-‐box-‐sizing: border-‐box; -‐webkit-‐box-‐sizing; border-‐box; box-‐sizing: border-‐box; display: inline-‐block; padding: 0.5em; width: 50%; } <div class="tag-‐green">Tag Green</div> <div class="tag-‐red">Tag Red</div>

Don’t REPEAT YOURSELF .tag { border: 1px solid #DDD;
-‐moz-‐box-‐sizing: border-‐box; -‐webkit-‐box-‐sizing; border-‐box; box-‐sizing: border-‐box; display: inline-‐block; padding: 0.5em; width: 50%; } .green { background: #66FF66; } .red { background: #FF3333; } <div class="tag green">Tag Green</div> <div class="tag red">Tag Red</div>

TIPS PLAN SKETCH ITERATE PAIR

QUESTIONS?

Thank you!

Write Better CSS

Write Better CSS

Adam Kaplan

Other Decks in Design

Featured

Transcript

{ } CSS WRITE BETTER by Adam Kaplan

IMPORTANT? WHY IS GOOD CSS

EASIER TO READ

KEEPS YOUR FILES LIGHTWEIGHT

MAKES YOUR CSS REUSABLE

HOW DO YOU WRITE BETTER CSS?

RESET ORDER DRY UP 3 EASY { STEPS

RESET

All browsers have presentation defaults, but no browsers have the

2 OPTIONS normalize.css necolas.github.io/normalize.css reset.css meyerweb.com/eric/tools/css/reset

reset.css /* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126

reset.css

normalize.css /* =============================================== Base =============================================== */

normalize.css /* =============================================== Forms =============================================== */

normalize.css 95% of that CSS is to keep various versions

INCLUDE AS SEPARATE FILES normalize.css base.css reset.css base.css

ORDER

application.css base.css normalize.css consumers.css home.css questions.css users.css application.css normalize.css

/* ... = require_self = require_tree . / / ...

/* Layout -‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐-‐ */ body { color: #333;

ALPHABETIZE box { z-‐index: 1; padding: 0.5em;

GROUP box { border: 1px solid #aaa; -‐moz-‐box-‐sizing:

Here’s the simple truth up-front: alphabetical CSS ordering makes your

DRY UP

Don’t REPEAT YOURSELF .tag-‐green { background: #66FF66; border:

Don’t REPEAT YOURSELF .tag { border: 1px solid #DDD;

TIPS PLAN SKETCH ITERATE PAIR

QUESTIONS?

Thank you!