Write Better CSS

1.

{ } CSS WRITE BETTER by Adam Kaplan

2.

IMPORTANT? WHY IS GOOD CSS

3.

EASIER TO READ

4.

KEEPS YOUR FILES LIGHTWEIGHT

5.

MAKES YOUR CSS REUSABLE

6.

HOW DO YOU WRITE BETTER CSS?

7.

RESET ORDER DRY UP 3 EASY { STEPS

8.

RESET

9.

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

10.

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

11.

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

12.

reset.css

13.

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

14.

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 {

15.

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

16.

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

17.

ORDER

18.

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

19.

/* ... *= 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

20.

/* 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 {

21.

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; }

22.

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

23.

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

24.

DRY UP

25.

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>

26.

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>

27.

TIPS PLAN SKETCH ITERATE PAIR

28.

QUESTIONS?

29.

Thank you!

Write Better CSS

Write Better CSS

Adam Kaplan

Want more?

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!