SMACSS

Scalable & Modular Architecture for CSS

A Quick Selector Refresher

body, div, a

.class

ID

#id

A QUICK SELECTOR REFRESHER

.ascendant .descendant

.parent > .child

:hover, :active

About the author

The Problem

Overly specific rules

.ribbon-item-large.ribbon-splitbutton:hover div.ribbon-splitbutton-icon {
    border-bottom: 1px solid orange;
}

Loose rules

/* Standard font */
html, body, table, td, input, select, button, textarea, iframe, div
{
    font-family: Verdana;
    font-size: 11px;
}

table.pt td div
{
    /* Layout.css defines a general font-family and font-size rule 
       that we need to override for printing
       font-family and font-size must be specified in a separate
       descendant div rule for every kind of pivot table style
       text-decoration does not cascade and also must be specified
     */
    font-family: "Segoe UI";
    font-size: 12px;
}

Base Rules

• Element selectors
  
• Pseudo classes
  
• No class or ID selectors

Examples

body
{
    background: white;
    margin: 0;
}

fieldset
{
    border: 1px solid #D5DFE5;
    border-radius: 3px;
}

fieldset[disabled="disabled"] > legend
{
    filter: alpha(opacity=40);
    opacity: 0.4;
}

Layout Rules

Examples

Page-level

#header {
    position: relative;
    height: 55px;
    line-height: 55px;
}

General layout

.l-grid {
    margin: 0;
    list-style-type: none;
}

.l-grid > li {
    display: inline-block;
    margin: 0 0 10px 10px;
}

Modules

Namespacing

instead of

.menu
.menu .item
.menu .control

use

.menu
.menu-item
.menu-control                            

Subclassing

.treelist td {
    border-bottom: solid 1px grey;
}

.cubeconfig {
    color: blue;
}

.cube-config-view .treelist td {
    border: none;
    color: #3e3e3e; /* from Common.css */
}

Subclassing

.treelist td {
    border-bottom: solid 1px grey;
}

.treelist-cube td {
    border: none;
}

HTML will have both classes

<table class="treelist treelist-cube">

State Rules

Examples

.button
{
    border: 1px solid grey;
    border-radius: 3px;
    color: black;
}

.is-button-disabled
{
    color: grey;
}

Examples

.statusribbon-icon
{
    width: 16px;
    height: 16px;
    background-repeat: no-repeat;
}

.is-statusribbon-error .statusribbon-icon
{
    background-image: url('error.png');
}

.is-statusribbon-info .statusribbon-icon
{
    background-image: url('info.png');
}