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?

CSS grows with site size
CSS best practices encourage what would otherwise be bad programming:
CSS is often contextually unreadable.
CSS encourages overrides
CSS encourages bad coupling and distant dependencies

    <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?