Structure

Acording to SMACSS, we can divide styles into 5 categories of rules:

• Base - global, default styles, single html selectors
• Layout - page sections holding modules
• Module - independent, reusable elements of our design
• State - temporary look of dynamic state
• Theme - colors, backgrounds, decorations

Base rules

normalize.css, default styles, single element selectors

body, form {
    margin: 0;
    padding: 0;
}

a {
    color: #039;
}

a:hover {
    color: #03F;
}
                

Layout rules

.l-fixed {
    width: 960px;
    margin: auto;
}

.l-content {
    width: 200px;
    float: left;
}

.l-sidebar {
    width: 740px;
    float: left;
    margin-left: 20px;
}

Module & state rules

<nav class="menu">
    <header class="sidebar-header">Featured section</header>
    <ul class="menu-items menu-horizontal menu-featuredItems">
        <li class="is-active">Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>
    <header class="menu-header">Normal section</header>
    <ul class="menu-items">
        <li>Item 4</li>
        <li>Item 5</li>
        <li>Item 6</li>
    </ul>
</nav>
                

.menu-horizontal > li {
    display: inline-block;
}
.menu-items {
    list-style: none;
}
.menu-items > .is-active {
    text-decoration: underline;
}
.menu-featuredItems {
    padding-left: 20px;
}
.menu-header {
    font-weight: bold;
    text-transform: uppercase;
}
                

Theme rules

.menu-horizontal > li {
    display: inline-block;
}
.menu-items {
    list-style: none;
}
.menu-featuredItems {
    padding-left: 20px;
}
.menu-header {
    font-weight: bold;
    text-transform: uppercase;
}
                

.menu {
    background: #00ff00;
    border: 1px solid blue;
}
.menu-horizontal > li {
    color: #ccc;
}
.menu-featuredItems {
    background: yellow;
}
.menu-header {
    color: red;
}
                

Helpers

Universal rules which can be applied everywhere

.is-hidden {
    display: none !important;
    visibility: hidden !important;
}
.pull-left {
    float: left
}
.pull-right {
    float: right
}
.clearfix:after {
    content: " ";
    visibility: hidden;
    display: block;
    height: 0;
    clear: both;
}
                

Scalability & modularity principles

Always keep corect file structure in development

/css
    /modules
        menu.css
        carousel.css
        filelist.css
        userform.css
    /themes
        /wireframe
            menu.css
            carousel.css
            filelist.css
            userform.css
        /novonordisk
            menu.css
            carousel.css
            filelist.css
            userform.css
    base.css
    normalize.css
    layout.css
    utils.css
                

Separate modules from layout and other modules

Use semantic class names

/* wrong */
.menu-item-pink-bolded-and-sexy {
    color: pink;
    background: red;
    font-weight: bold;
}

/* correct */
.menu-item-featuredLink {
    color: pink;
    background: red;
    font-weight: bold;
}
                

Write small modules, create compositions

/* wrong */

.component-subcomponent-and-a-lot-of-other-nested-stuff {

    /* ... */

}
                

You cannot put id multiple times always use classes

Avoid deep, node rules

.sidebar div {
    border: 1px solid #333;
}
.sidebar div h3 {
    margin-top: 5px;
}
.sidebar div ul {
    margin-bottom: 5px;
}
                

.sidebar-container {
    border: 1px solid #333;
}
.sidebar-header {
    margin-top: 5px;
}
.sidebar-list {
    margin-bottom: 5px;
}
                

Maximum 3 elements per rule

If not - your markup is bad designed

.menu-list-element.is-active > a {
    /* ... */
}