Research: Modular CSS

Goal

Modular, Reusable and Maintainable Code-base for Complex Web Projects

Core Principals

1. Separate Structure / from Skin / from Containers / from Content / from Behavior

2. Decouple Html from CSS: Keep a shallow depth of applicability (or don't make class styles location/structure specific).

3. Keep CSS selector specificity to a minimum; this allows for easy overrides.

4. Use "object-oriented" and component thinking in architecting css.

5. Use prefix name-spacing for organizing/categorizing selectors.

6. Modular CSS requires both visual and data semantics : use the class cascade and thoughtful naming to bring meaning to both.

Draft Conventions

A. Namespacing

• Use keyword prefixes to name-space the objects

Example:

scope-object
e-list

B. Cascade names by building off a base class name

Example:

class-extension
nav nav-special

C. Reserve lowerCaseCamelNotation for IDs and stateClasses

• These interplay with Javascript; reserve IDs for Javascript hooks
• Otherwise, class-names should follow native css convention, using lower-case-dash-notation for easy distinction from Javascript

Example:

#myId 
.my-class

D. Use up to a 3 letter prefix

• Notate major object types (1) and their subtypes (2)
• Use specific keywords consistently and treat naming patterns consistently
• Proposed Reserved Prefixes:

Block

• Use "block" to refer to a reusable chunk of structured code.

• Titles for blocks should be semantic to design objects (i.e. ux/design patterns: accordion, slider, billBoard, landingPage, content-primary, content-secondary)

• Blocks gain meaning by their functional intent -- thus they are influenced by context.

• Blocks have a patterned structure; keep this structure to maintain consistency across modules:

  1. wrapper bwp-object-title
  2. inner bin-object-title
  3. heading bhd-object-title
  4. body bbd-object-title
  5. footer bft-object-title

Example:

<div class="bwp-object-title">
<div class="bin-object-title">
	<h2 class="bhd-object-title"></h2>
	<div class="bbd-object-title">
		... various html elements in here ...
	</div>
	<div class="bft-object-title">
	    ... various html elements in here ...
	</div>
</div>
</div>

Element:

• Use "element" to refer to the children content objects of a block
• Titles for elements should be semantic to data/information objects (i.e. content or data types: shopping-list, contact-information, author-bio, etc.)

Example:

e-object-title

Visuals:

• Use "visuals" to refer to skin elements that have a high reuse factor

• Visuals are design treatments and should be content/data structure agnostic

• To keep visuals forward-proof keep names descriptive to design use but not specific to particulars (i.e. overlay-glow, editorial-masthead, fx-letter-press rather than 5px-line, red-border)

• Visuals have various stylistic patterns for use:

  1. effects vfx-object-title
  2. type treatments vtt-object-title
  3. backgrounds vbg-object-title
  4. borders vbr-object-title
  5. shadows vsw-object-title

NOTE: See Sullivan's idea of visual semantics (link in references)

Layout:

• Use "layout" to refer to macro structural (i.e. container) code (i.e. major page sections or boxes)

• Layouts help determine the major rendered flow of a page's structure

• Layouts, like visuals are design objects-- they are context independent containers

• To maintain forward-proof objects strive to keep names descriptive to use and base ratios rather than to specific "locations" (i.e. lgd-col-4, lnb-media-col-2 rather than right-column, left-column, top-box)

• Layouts also have different facets, especially when working with frameworks and making decisions/changes in responsive design:

  1. grids lgd-object-title
  2. nested box lnb-object-title

NOTE: Grids are usually applied at/above the block wrapper level, while nested objects at/below the block inner level. Grids and Nested Objects are independent of structure (blocks) and content. You should be able to change out containers easily.

States:

• Use "states" to refer to the behavioral changes (jQuery, animations, transitions, etc.)
• Naming should describe the behavior clearly from other states (i.e. an object's hidden state can be sIsHidden while it's visible state can be sNotHidden)
• States will be frequently used as JS hooks; use lowerCaseCamelNotation

Example:

sOnObjectTitle
sOffObjectTitle

E. Class String Ordering

• When tiling classnames together begin with the richest data semantic object first, then proceeding to structural context, stable layouts, followed by changing states and visuals last.
• This provides a reader (human and screen) with data rich information, first, and keeps a reliable pattern for the most change volatile classes towards the end of the string.
• Since CSS Cascade is applied from the style-sheet perspective and not on class call ordering, this pattern can remain fixed w/o impacting code behavior.

Example:

<ul class="e-shopping-list bbd-accordion-panel lnb-submenu sIsHidden vbg-gradient-glow">

Reference Sources:

1. On Visual Semantics for CSS, Nichole Sullivan: http://www.stubbornella.org/content/2010/06/12/visual-semantics-in-html-and-css/
2. Correct Granularity for CSS Objects, Nichole Sullivan: http://www.stubbornella.org/content/2010/06/21/css-granularity-architecture/
3. Decoupling HTML from CSS, Jonathan Snook: http://coding.smashingmagazine.com/2012/04/20/decoupling-html-from-css/
4. The BEM Method, from Yandex: http://bem.github.com/bem-method/pages/beginning/beginning.en.html
5. Scoping Class Names with Prefixes, from Mark Otto: http://www.markdotto.com/2012/02/16/scope-css-classes-with-prefixes/
6. CSS Conventions lower-case-dash-notation, from Stack Overflow: http://stackoverflow.com/questions/7560813/why-are-dashes-preferred-for-css-selectors-html-attributes
7. CSS Dash Convention vs. Javascript camelCase, from Stack Overflow: http://stackoverflow.com/questions/2119629/javascript-and-css-using-dashes
8. Naming Conventions, Practical Considerations, from Programmers Stack Exchange:http://programmers.stackexchange.com/questions/141988/practical-considerations-for-html-css-naming-conventions-syntax
9. SMACSS, from Jonathan Snooks: http://smacss.com/book/
10. OOCSS, from Nichole Sullivan: https://github.com/stubbornella/oocss/wiki

Discussion

Naming Conventions

[ERIC] on JUNE 14

I don't see the purpose in using verbose naming conventions with module titles appended in front. Consider the example listed above: "e-shopping-list bbd-accordion-panel lnb-submenu sIsHidden vbg-gradient-glow". This sort of styling is very hard for the casual markup designer to understand. If we design our namespace right, modules can contribute to a shared namespace.

This discussion should probably be continued on the Conventions page rather than here.