Always start with Normalize

Browsers will render your CSS differently. To avoid this, it’s a good idea to use a modern alternative to a reset like normalize.css, which will render elements more consistently cross-browser. Remember to include it as-is before your stylesheet.

/**
 * 1. Set default font family to sans-serif.
 * 2. Prevent iOS text size adjust after orientation change,
 *    without disabling user zoom.
 */

html {
  font-family: sans-serif; /* 1 */
  -ms-text-size-adjust: 100%; /* 2 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/**
 * Remove default margin.
 */

body {
  margin: 0;
}

Organize your CSS

Organize your CSS code to reflect the flow of your website’s layout. For example, your navigation CSS should be at the top of your file and your footer should be closer to the bottom.

Put properties related to one another close together and use comments sparingly to break up the different sections of your CSS. The combination of a few comments and grouping similar elements together will make it much easier to quickly find what your looking for.

Comment guidelines from principles of writing consistent, idiomatic CSS. Box-sizing CSS from box-sizing best practices.

/* ==========================================================================
   Section comment block
   ========================================================================== */

/* Basic comment */

/* ==========================================================================
   Layout
   ========================================================================== */

/* Apply a natural box layout model to all elements, but allowing components to change */
html { box-sizing: border-box; }

*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
  background: #fff;
  color: #333;
  font-family: 400 100%/1.5 "soleil", sans-serif;
}

.container {
  margin: 0 auto;
  max-width: 32em;
  padding: 1.5em 0;
  width: 90%;
}

/* ==========================================================================
   Header
   ========================================================================== */

header {
  border-bottom: 1px solid #ddd;
  margin-bottom: 1.5em;
}

nav {
  float: right;
  padding: .5em;
}

/* ==========================================================================
   Typography
   ========================================================================== */

p {
  margin-top: 0;
  margin-bottom: 1.5em;
}

/* ==========================================================================
   Footer
   ========================================================================== */

footer {
  background: #333;
  padding: 1em; 0;
}

Alphabetize your CSS properties

Write your CSS properties in alphabetical order; it will help reduce the time it takes to find a specific property. Read why you should order CSS properties alphabetically.

Don’t worry about alphabetizing vendor prefixes (like border-radius, for example) with the rest of your properties, as you will want to keep those grouped together. Make sure you place unprefixed versions last (browsers read your styles from top to bottom) as browsers are largely moving away from vendor prefixes.

In this example, the alphabetized CSS is easier to skim through because we know the z-index will always be at the bottom.

.box {
  z-index: 999;
  padding: .5em;
  margin-bottom: 1em;
  color: #333;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  border: 1px solid #ddd;
  width: 100%;
}

/* Alphabetized */
.box {
  border: 1px solid #ddd;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  color: #333;
  margin-bottom: 1em;
  padding: .5em;
  width: 100%;
  z-index: 999;
}

Clean up your selectors

Keep single selectors to one line, even when grouping multiple selectors into one declaration. This makes reading your CSS easier!

/* ==========================================================================
   Typography
   ========================================================================== */

h1,
h2,
h3,
h4 {
  font: $header-font;
  margin-top: 0;
  margin-bottom: .5em;
}

h1 { font-size: 2.5em; }
h2 { font-size: 1.8em; }
h3 { font-size: 1.2em; }

h4 {
  font-size: .9em;
  letter-spacing: .0625em;
  margin-bottom: .3em;
  text-transform: uppercase;
}

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>

CSS Workshop

Always start with Normalize

Organize your CSS

Alphabetize your CSS properties

Clean up your selectors

Heading 1

Heading 2

Heading 3

Heading 4

Resources