evernote / css-style-guide

Evernote CSS Style Guide

Table of Contents

1. Properties Ordering
2. Selector Depth
3. Basic Code Formatting
4. Color values
5. Comments
6. Sass Build Structure

Properties Ordering

The basic rule of thumb is INSIDE OUT. This may be the exact opposite of what you may have down in the past, but the majority of the time this is how properties affect sizing. The font-size will be the first thing to affect the height, followed by they line-height which is directly related to the elements font-size or the inherited font-size of the parent (depending on the unit you use). The next item is the inter-play of the length of content and Width and Height properties. This is followed by padding, then border size, then margins, then finally positioning properties.

• Text Properties

line-height
font-* properties
alphabetize from here

• Box model

width
height
padding
border
margin

• Display

display
overflow (this might belong under box model)

• Display

position
top
left

⬆ back to top

Selector Depth

The only time you should go more than 3 selectors deep is for :hover & :focus states. Alex is finding this is becoming more and more a hard and fast rule. The deeper you nest, the more problems you will have down the road. If you can do it in fewer selectors with more semantic class names, the better off we will be down the road.

⬆ back to top

Basic Code Formatting

Use two spaces for indentation.

Add a line of white space between each selector + properties block.

// bad
.header {
  …
}
.logo-bar {
  …
  a {…}
}

// good
.header {
  …
}
.logo-bar {
  …

  a {
    …
  }
 }

⬆ back to top

Color values

All hex color values should use lower case letters.

Colors should be made into variables to be reused.

⬆ back to top

Comments

Comments related to code that is rendered out directly should use the standard slash star syntax.

/* Headings */
h1 {…}
h2 {…}

Comments related that code or files that are not rendered out directly should use the double slash sytnax. This should be used in places where we might be labeling a group of variables, or a mixin that will be used later, or a file that is a library of such things.

// ===================================================================
//  Copyright 2014 Evernote Corporation. All rights reserved.
//
//  Variables
//
//  Base set of variables for use with the web project
//  ==================================================================

// colors $evernoteGreen: #20c05c;

⬆ back to top

SASS Build Structure

See how Evernote Front End Engineers handle a simple build structure for SASS files.

Evernote SASS build structure

⬆ back to top