Write Better CSS - Speaker Deck

Slide 1

Slide 1 text

{ } CSS WRITE BETTER by Adam Kaplan

Slide 2

Slide 2 text

IMPORTANT? WHY IS GOOD CSS

Slide 3

Slide 3 text

EASIER TO READ

Slide 4

Slide 4 text

KEEPS YOUR FILES LIGHTWEIGHT

Slide 5

Slide 5 text

MAKES YOUR CSS REUSABLE

Slide 6

Slide 6 text

HOW DO YOU WRITE BETTER CSS?

Slide 7

Slide 7 text

RESET ORDER DRY UP 3 EASY { STEPS

Slide 8

Slide 8 text

RESET

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

reset.css

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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 {

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

ORDER

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

/* ... *= require_self *= require_tree . */ /* ... *= require_self *= require normalize *= require base */ application.css application.css RAILS ASSET PIPELINE ORIGINAL FLA VOR layout.html

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

DRY UP

Slide 25

Slide 25 text

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

Tag Green

Tag Red

Slide 26

Slide 26 text

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