CSS/SASS coding style guide

Table of contents

1. CSS
   • Whitespace
   • Comments
   • Naming Conventions
   • Formatting
   • Declaration order
2. SASS
   • Syntax
   • Ordering
   • Vendor Prefixes
   • Variables
   • Mixins
   • Nested Selectors
3. References

CSS

Whitespace

Only one style should exist across the entire source of your code-base. Always be consistent in your use of whitespace. Use whitespace to improve readability.

• Never mix spaces and tabs for indentation.
• Choose between soft indents (spaces) or real tabs. Stick to your choice without fail. (Preference: spaces)
• If using spaces, choose the number of characters used per indentation level. (Preference: 4 spaces)

Tip: configure your editor to "show invisibles" or to automatically remove end-of-line whitespace.

Tip: use an EditorConfig file (or equivalent) to help maintain the basic whitespace conventions that have been agreed for your code-base.

Comments

Prefer comments on their own line. Avoid end-of-line comments.

Code is written and maintained by people. Ensure your code is descriptive, well commented, and approachable by others. Great code comments convey context or purpose. Do not simply reiterate a component or class name.

Be sure to write in complete sentences for larger comments and succinct phrases for general notes.

/* Bad */
/* Modal header */
.modal-header {
    ...
}

.selector {
    color: #000; /* Go to comment here */
}

/* Good */
/* Wrapping element for .modal-title and .modal-close */
.modal-header {
    ...
}

Naming Conventions

Keep classes or IDs lowercase and use dashes (not underscores or camelCase).

/* Bad */
.selector_name {
    ...
}
.selectorName {
    ...
}

/* Good */
.selector-name {
    ...
}

Besides, you can looking at the BEM namespaces. The most important thing is that you pick one as a team and stick with it

Formatting

Use one discrete selector per line in multi-selector rulesets.

/* Bad */
.selector-1, .selector-2 {
    ...
}

/* Good */
.selector-1,
.selector-2 {
    ...
}

Include a single space before the opening brace of a ruleset.

/* Bad */
.selector{
    ...
}

/* Good */
.selector {
    ...
}

Include one declaration per line in a declaration block.

/* Bad */
.selector {
    width: 100px; height: 100px;
}

/* Good */
.selector {
    width: 100px;
    height: 100px;
}

Include a single space after the colon of a declaration.

/* Bad */
.selector {
    width:100px;
}

/* Good */
.selector {
    width: 100px;
}

Use lowercase and shorthand hex values

/* Bad */
.selector {
    color: #FFFFFF;
}

/* Good */
.selector {
    color: #fff;
}

Use single or double quotes consistently. Preference is for double quotes

/* Bad */
.selector {
    content: "";
}

.input[type='text'] {
    ...
}
/* Good */
.selector {
    content: "";
}

.input[type="text"] {
    ...
}

Quote attribute values in selectors.

/* Bad */
input[type=text] {
    ...
}

/* Good */
input[type="text"] {
    ...
}

Where allowed, avoid specifying units for zero-values. Exception, where you don't omit transform: rotate(0deg)

/* Bad */
.selector {
    margin: 0px;
}

/* Good */
.selector {
    margin: 0;
}

Don't prefix property values or color parameters with a leading zero

/* Bad */
.selector {
    transition: all 0.3s ease;
    color: rgba(0,0,0,0.5);
}

/* Good */
.selector {
    transition: all .3s ease;
    color: rgba(0,0,0,.5);
}

Include a space after each comma in comma-separated property or function values.

/* Bad */
.selector {
    box-shadow: 0px 1px 2px rgba(0,0,0,0.5),inset 0 1px 0 #fff;
}

/* Good */
.selector {
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.5), inset 0 1px 0 #fff;
}

Include a semi-colon at the end of the last declaration in a declaration block.

/* Bad */
.selector {
    color: #fff
}

/* Good */
.selector {
    color: #fff;
}

Place the closing brace of a ruleset in the same column as the first character of the ruleset.

/* Bad */
.selector-1 {
    ... }

.selector-2 {
    ...
    }

/* Good */
.selector {
    ...
}

Separate each ruleset by a blank line.

/* Bad */
.selector-1 {
    ...
}
.selector-2 {
    ...
}

/* Good */
.selector-1 {
    ...
}

.selector-2 {
    ...
}

Avoid dangerous selectors

/* Bad */
header {
    ...
}
h2 {
    ...
}

/* Good */
.header {
    ...
}
.title {
    ...
}

Avoid qualifying class names with element selectors

/* Bad */
ul.list {
    ...
}
h3.title {
    ...
}

/* Good */
.list {
    ...
}
.title {
    ...
}

Avoid deep nesting. You should also try to nest your selectors maximum 3 levels deep

/* Bad */
.container .linklist li a {
    ...
}

/* Good */
.container .linklist a {
    ...
}

Avoid using the same selector for styling and JS

Bad

.dialog-opener {
    ...
}

$('.dialog-opener')

Good

.dialog-opener {
    ...
}

$('.js-dialog-opener')

Use shorthand properties where possible

/* Bad */
.selector {
    padding-top: 0;
    padding-right: 10px;
    padding-bottom: 20px;
    padding-left: 10px;
}

/* Good */
.selector {
    padding: 0 10px 20px;
}

Avoid unnecessary shorthand declarations

/* Bad */
.selector {
  margin: 0 0 20px;
}

/* Good */
.selector {
  margin-bottom: 20px;
}

Use hexadecimal color codes unless using rgba or hsl or name

/* Bad */
.selector {
    color: orange;
}

/* Good */
.selector {
    color: #ffa500;
}

Use number keywords 100–900 for font-weight

/* Bad */
.selector {
    font-weight: normal;
}

/* Good */
.selector {
    font-weight: 400;
}

Declaration order

Related property declarations should be grouped together following the order:

1. Positioning
2. Box model
3. Typographic
4. Visual

.declaration-order {
    /* Positioning */
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 100;

    /* Box-model */
    display: block;
    float: right;
    width: 100px;
    height: 100px;

    /* Typography */
    font: normal 13px "Helvetica Neue", sans-serif;
    line-height: 1.5;
    color: #333;
    text-align: center;

    /* Visual */
    background-color: #f5f5f5;
    border: 1px solid #e5e5e5;
    border-radius: 3px;

    /* Misc */
    opacity: 1;
}

SASS

Beside follow as style guide of css. In Sass, I have added some style guides for them.

Syntax

Should use SCSS-syntax because it's valid CSS and more expressive in our eyes.

// SASS syntax - Not prefer
.selector-parent
    color: #fff
    background-color: #000

    .selector-child
        font-size: 20px

// SCSS syntax - Prefer
.selector-parent {
    color: #fff;
    background-color: #000;

    .selector-child {
        font-size: 20px;
    }
}

Ordering

• List $variable should always appear at the top
• List @extend(s) next
• List @include(s) next
• List regular style next
• List your media queries next
• Nested pseudo classes and pseudo elements next
• Nested selectors last

.block {
    $background: #fff;
    $background-hover: #f00;

    @extend %module;
    @include transition(all 0.3s ease);
    background: $background;

    @include breakpoint(phone) {
        width: 100%;
    }

    &:hover {
        background: $background-hover;
    }

    &::before {
        content: "";
        display: block;
    }

    h3 {
        @include transform(rotate(90deg));
        border-bottom: 1px solid #fff;
    }
}

Vendor Prefixes

Never Write Vendor Prefixes. You should use Autoprefixer instead of. Autoprefixer parses CSS files and adds vendor prefixes to CSS rules using the Can I Use database to determine which prefixes are needed.

Variables

Updating...

Mixins

Updating...

Nested Selectors

Do not nest selectors more than three levels deep!

.page-container {
    .content {
        .profile {
            // STOP!
        }
    }
}

References

A huge of source that i referred to done this repository.

• Principles of writing consistent, idiomatic CSS.
• Airbnb - A mostly reasonable approach to CSS and Sass.
• High-level advice and guidelines for writing sane, manageable, scalable CSS
• Github Style Guide
• Google Style Guide
• Code Guide by @mdo
• Some HTML, CSS and JS best practices
• Isobar Front-end Code Standards
• Principles for writing consistent, clean, friendly Sass
• CSSTricks - Sass style guide
• HTML/CSS coding style
• Improving Code Readability With CSS Styleguides
• ThinkUp - Code Style Guide CSS