IOCSS (WIP)

A front-end methodology for robust/flexible/scalable HTML/CSS/JavaScript.

Basics

• Every HTML element can be a Component.
• Component may has one or more Element(s).
• Element can also be a Component.
• Modifier/State class name isn't a good idea.
• Each Component should know only itself and its own Element(s)/Sub-Component(s).
• IOCSS allows you to use 2 different syntaxes. One is BEM-like syntax, another is Interface-driven syntax.

(Web Components might also rescue us from CSS nightmares.)

Class name (BEM-like syntax)

• The class name of each HTML element should be component or component--element.
• "component" means just "A component Component". This is similar to BEM's Block.
• "component--element" means "An element Element OF the component Component".
  In other words, "The component Component HAS the element Element". This is similar to BEM's Element.
• Normally, one Element has only 1 or 2 class(es).
  One is for the Element of a Component, another is for a Sub-Component that is injected as the Element.
• "component--element another-component" means "An element Element OF the component Component" and "The element Element IS also another-component Component".
  This is for CSS selector delegation/CSS selector chaining.
• Cerate new class name for a variant of Component/Element, instead of using a class name like BEM's Modifier.
• Adding vendor-prefix to each class name is a good idea.

Common Component Structure (BEM-like syntax)

<div class="component-name">
    <div class="component-name--content">
        <div class="component-name--header">
        </div>
        <div class="component-name--body">
        </div>
        <div class="component-name--footer">
        </div>
    </div>
</div>

• You may omit each Element.

Common Component Structure (Interface-driven syntax with Component Interafce)

<div class="component-name i-component">
    <div class="component-name i-component--content">
        <div class="component-name i-component--header">
        </div>
        <div class="component-name i-component--body">
        </div>
        <div class="component-name i-component--footer">
        </div>
    </div>
</div>

Resources

• Example (BEM-like syntax)
• Component with the Structural Interface