Base and Layout Rules for SMACSS

Scalable and Modular Architecture for CSS "SMACSS"  , it is a way to examine and analyse your design process and a way to put those rigid frameworks to a flexible framework throught the website or we can say that it is a way to document a consistent approach while development of a site while using CSS. 

The SMACSS is categorization of CSS rules, which is as follow:

1. Base 

2. Layout

3. Module

4. State

5. Theme

BASE RULES

The base rules are applied to the elements by using  an element selector or either using a child selector along with any pseudo-classes. The base rule doesn't include any class or Id selector.Basically, It defines the default styling for how that element should look whenever it occurs in the page.

Example:

body {
    margin: 0;
    padding: 0;
}

a {
    color: #039032;
}

a:hover {
    color: #03F458;    
}
        

Mainly our base styles include our heading sizes, body backgrounds and default font styles and there should be no need to use the !important in the base style css.

LAYOUT RULES

In a site/page Css is used to lay the elements.however, there a distnction between layouts constituting of major and minor components of a page. The minor components like, login-form or a navigation these are refered as minor components as they sit within the scope of major components such as header and footer. 

The minor components are refered as Modules and the major are refered to as Layout styles.

The layoutstyles can further be divided as minor and major styles based on their resusabilty.

Example for layout declarations :

#header, #article, #footer {
    width: 960px;
    margin: auto;
}

#article {
    border: solid #CCC;
    border-width: 1px 0 0;
}
        

For the major layout styles like headers and footers ID selectors are used whereas for the minor ones class selectors are used so that they can be used multiple times across the page.

Example for use of  highlevel layout style affecting other layouts styles:

#section {
    float: left;
}

#sidebar {
    float: right;
}

.l-flipped #section {
    float: right;
}

.l-flipped #sidebar {
    float: left;
}
        

so these are the base rule and layout rules for scalable and modular architecture for CSS

Thanks