Technology moves fast! ⚡ Don't get left behind.🚶 Subscribe to our mailing list to keep up with latest and greatest in open source projects! 🏆


Subscribe to our mailing list


Statistics on css-style-guide

Number of watchers on Github 22
Number of open issues 0
Main language
Open pull requests 0+
Closed pull requests 0+
Last commit almost 5 years ago
Repo Created almost 5 years ago
Repo Last Updated over 2 years ago
Size 144 KB
Organization / Authorevernote
Contributors2
Page Updated
Do you use css-style-guide? Leave a review!
View on github
Fresh, new opensource launches 🚀🚀🚀
Trendy new open source projects in your inbox! View examples

Subscribe to our mailing list

Evaluating css-style-guide for your project? Score Explanation
Commits Score (?)
Issues & PR Score (?)

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

css-style-guide questions on Stackoverflow (View All Questions)
  • Recommended CSS style Guide
  • CSS Style Guide Generator?
  • Is there a CSS style guide for large existing projects. Or how could I optimize the css for a large project
  • CSS style guide question
css-style-guide list of languages used
Other projects in