Write Better CSS

{ }
CSS
WRITE
BETTER
by Adam Kaplan

View Slide

IMPORTANT?
WHY IS GOOD CSS

View Slide

EASIER TO
READ

View Slide

KEEPS YOUR FILES
LIGHTWEIGHT

View Slide

MAKES YOUR CSS
REUSABLE

View Slide

HOW DO YOU
WRITE BETTER CSS?

View Slide

RESET
ORDER
DRY UP
3 EASY {
STEPS

View Slide

RESET

View Slide

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

View Slide

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

View Slide

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

View Slide

reset.css

View Slide

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

View Slide

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
{

View Slide

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

View Slide

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

View Slide

ORDER

View Slide

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

View Slide

/* ...
*= require_self
*= require_tree .
*/
/* ...
*= require_self
*= require normalize
*= require base
*/
application.css application.css
RAILS ASSET PIPELINE

ORIGINAL FLA
VOR
layout.html

View Slide

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

View Slide

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 {
padding: 0.5em;
width: 100%;
z-‐index: 1;
}

View Slide

GROUP
box {
padding: 0.5em;
width: 100%;
z-‐index: 1;
}
{
group vendor prefixes

View Slide

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

View Slide

DRY UP

View Slide

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

View Slide

Don’t
REPEAT
YOURSELF
.tag {
padding: 0.5em;
width: 50%;
}
.green {
background: #66FF66;
}
.red {
background: #FF3333;
}
Tag Green
Tag Red

View Slide

TIPS
PLAN
SKETCH
ITERATE
PAIR

View Slide

QUESTIONS?

View Slide

Thank you!

View Slide

Write Better CSS

Write Better CSS

Adam Kaplan

Other Decks in Design

Featured

Transcript