Repository files navigation

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

• 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 isBEM-like syntax, another isInterface-driven syntax.

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

• The class name of each HTML element should becomponent orcomponent--element.
• "component" means just"Acomponent Component". This is similar to BEM's Block.
• "component--element" means"Anelement Element OF thecomponent Component".
  In other words,"Thecomponent Component HAS theelement 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--elementanother-component" means"Anelement Element OF thecomponent Component" and"Theelement Element IS alsoanother-component Component".
  This is forCSS 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.

<div>    <div>        <div>        </div>        <div>        </div>        <div>        </div>    </div></div>

• You may omit each Element.

<div>    <div>        <div>        </div>        <div>        </div>        <div>        </div>    </div></div>

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