HTML Class naming conventions: BEM-like syntax example - Buttons

BEM-buttons.css

/* Use class-attribute selectors for modules with common styles */
[class*="btn--"] {
 	background: #CCC;
 	padding: .5em;
 	text-decoration: none;
}

/* Target individual module modifiers as needed */
.btn--add {
 	background-image:('icon-plus.png') 0 50% no-repeat;
}
.btn--shopping-cart {
 	background-image:('icon-cart.png') 0 50% no-repeat;
}

BEM-buttons.html

<div class="btn-group">
 	<button class="btn--add">Add</button>
 	<a href="shopping-cart.php" class="btn--shopping-cart">Cart</a>
</div>

<!-- 
	<button> HTML element preferred for non-link buttons with client-side scripting for associated behavior (triggered UI events)
	<a> HTML element for links with fallback 'href'  in absence of JavaScript behavior
-->
	

BEM-defined.md

BEM stands for "block, element, modifier" and is a front-end naming convention. Essentially, follows this scheme:

• Block = module (or 'parent' element in a particular construct)
• Element = sub-module (or a 'child' element in that construct)
• Modifier = a variation of a particular module / sub-module

Suggested BEM-like syntax and naming convention follows this scheme in that we will have blocks (or modules), block elements (or sub-modules), and block modifiers.

See: http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/

This is the pattern:

• .block {} - represents the higher level of an abstraction or component.
• .block__element {} - represents a descendent of .block that helps form .block as a whole.
• .block--modifier {} - represents a different state or version of .block.

Double rather than single hypens and underscores are used to allow for blocks to be hyphen delimited. We do not want to use camelCaseClassNames.

###Example:

.author-account {} /* module or block */
.author-account__field {} /* sub-module or element */
.author-account--active {} /* modifier */