Skip to content

CSS Methodology

The reasons why we need a methodology for CSS are because we need a reusable code (almost NONEXISTENT very often), because the code is too fragile, everybody want to write their clever code and because the size of the CSS will increase almost 1:1 in a relantioship witht he number of the blocks, pages and complexity of content. The most efficient methodologies names in CSS are the following: OOCSS, SMACSS and BEM. Now let’s see what are the advantages of each one of them.

 

OOCSS (Oriented Object CSS)

This is a methodology named by Nicole Sullivan, a front-end enginner with more than ten years of experience. This principle is based on writing a reusable CSS object structure.

A CSS Object is a visual pattern that can be converted in a html snippet.

 

PRINCIPLES:

  1. Separate Structure and Skin. Create abstract elements and decorate them with skins. Extend class with aditional classes.
  2. Separate Content and Container. Break code into container module (module object) and content of it.
CSS
 /* style */
 .media {
 overflow: hidden;
 zoom: 1;
 width: 250px;
 }

.media-img {
 float: left;
 margin-right: 10px;
 }

HTML
 <div class='media'> // Base Class
 <div class='media-img'>
 <img src='http://dummyimage.com/100x100/000/fff' />
 </div>
 <div class='media-body'>
 <p>Lorem ipsum is simply dummy text</p>
 </div>
 </div>

Output:

Capture

 

 

 

 

 

And we can use this aproach for a different style:

CSS
 /* OOCSS style*/
 .media-img > img {
 display: block;
 margin: 10px;
 }

.media-body{
 overflow: hidden;
 }

.media-shadow {
 box-shadow: 0 1px 5px rgba(0, 0, 0, 0.75);
 }
HTML
 <div class='media media-shadow'> <!-- media-shadow is a modifier -->
 <div class='media-img'> <!-- descendent -->
 <img src='http://dummyimage.com/100x100/000/fff' />
 </div>
 <div class='media-body'>
 <p>Lorem ipsum is simply dummy text</p>
 </div>
 </div>

Output:
Capture1

 

SMACSS (Scalable & Modular Architecture for CSS)


SMACSS
 is a way to examin your design process and an attempt to document a consistent approach to site development when using CSS.

PRINCIPLES

  1. Categorizing CSS Rules
    Create a ‘box’ where you have rules splited into different categories like: base, layout, module, state, theme
  2. Naming Rules
    Adapt a naming convention so you can identify quickly the type of the element.
    l-, layout-, grid-, is-opened, is-hidden, is-collapsed, module-.
  3. Minimizing the depth of applicability
    It cares more on adding extra classes to HTML elements rather than use elements with a big depth.NO:

    body.article > #main > #content > #intro > p > b

    YES:

    .article #intro b

Be First to Comment

Leave a Reply

Your email address will not be published. Required fields are marked *