Scalable (CSS)Frontend Architecture

hello, I'm Praveen

A.K.A. @apnerve

      var apnerve = {
        fullName: "Praveen Kumar",
        title: "Web Developer",
        currentLocation: "Bangalore, IN",
        employment: {
            company: "Kuliza",
            position: "Web Developer"
        }

We all follow web standards. Right?

What's wrong with CSS?

    <style>
    #sidebar .mod h3 { /* some rules */ }
    #sidebar .mod p { /* some rules */ }
    </style>
    ---
    <div id="sidebar">
      <div class="mod">
        <h3>heading</h3>
        <p>content</p>
      </div>
    </div>
    <!-- true separation? -->

OOCSS

(OOCSS) Object Oriented CSS is a methodology for organising and extending CSS.

Principles

  • Separate structure and skin.
  • Separate container and content.

can be achieved if we use "class" selectors alone

      class="structure-class skin-class"
      class="base-class extend-class"
        
      <style>
      .mod .hd { /* some rules */ }
      .mod .bd { /* some rules */ }
      </style>
      ---
      <div id="sidebar">
        <div class="mod">
          <h3 class="hd">heading</h3>
          <p class="bd">content</p>
        </div>
      </div>
        
      <style>
      .mod .hd { /* some rules */ }
      .mod .bd { /* some rules */ }
      </style>
      ---
      <div id="sidebar">
        <div class="mod">
          <h2 class="hd">heading</h3>
          <p class="bd">content</p>
        </div>
      </div>

Double-stranded heading hierarchy

practice of defining a class every time you define a heading in CSS.

      <style>
      h1, .h1 { /* some rules */ }
      h2, .h2 { /* some rules */ }
      ...
      h6, .h6 { /* some rules */ }
      </style>

media Object

The media object is an image to the left, with descriptive content to the right

SMACSS

  • Similar philosophy
  • Based on categorising the CSS rules

There are five types of categories:

  • Base
  • Layout
  • Module
  • State
  • Theme

BEM

  • Similar philosophy
  • 3 types of components. Block, Element and Modifier

Common things in all

  • Think in terms of components. Identify reusable component.
  • Create re-usable components and mix-n-match them as per requirements
  • element agnostic selectors
  • context-free selectors

Goal: styles should less dependant on our structure.

Credits

  • OOCSS - By Nicole Sullivan
  • SMACSS - By Jonathan Snook
  • BEM - By Yandex

Questions?