A collection of common CSS module, subcomponent, and modifier class names from around the web.

CSS Modules, Subcomponents, and Modifiers Collection.md

What are CSS modules, subcomponents, and modifiers?

Recently I've been researching SMACSS by Johnathan Snook and the BEM Methodology by Yandex as well as examing my own style of crafting CSS. I've started adopting an approach based on SMACSS that uses the Base, Layout, Module, State approach for structuring my CSS, though I'ved expanded on the concept of modules based on my research into the BEM methodolgy. I've started using a pattern which I refer to it as Module, Subcomponent, Modifier.

Modules

The concept of modules is the same concept of modules described in SMACSS. So if your fimiliar with SMACSS, you already know what modules are. A few examples of modules that come to mind are things like:

.nav, .alert, .btn, .modal

Subcomponents

Subcomponents are the inside parts of a module, if it has any. They make up the module. For example, with a .modal module you might have the following components:

.modal-header, .modal-body, .modal-footer

Another example would be a .post module. With it, you have to following components:

.post-title, .post-date, .post-author, .post-thumb, .post-entry, etc.

Modifiers

Again, if you are familiar with SMACSS, you already know what modifiers are. Snook refers to them submodules, though after reading over the BEM methodolgy, I prefer to call these modifiers. The concept is simple, we use modifiers to modify instances of a module. Some examples of modifiers are things like

--bread-crumbs, --success, --submit

Modifiers are added onto modules to expand their basic functionality for specific cases.

Examples of the above modifiers in use would look like:

.nav--breadcrumbs, .alert--success, .btn--submit

What is this repo?

This repo is simply a collection of common module names, component names, and modifier names from around the web. I believe naming things is one of the hardest parts of coding. How you style the elements is up to you, though I thought it would be nice to come up with a collection of common/popular HTML class names for modules, components, and modifiers to help create more standardization in my projects.

More thoughts on HTML Class naming conventions.

I've jotted down some thoughts on HTML Class naming conventions on my blog. Have a certain way you name your modules, subcomponents, and modifiers? Let me know.

Credit

• Johnathan Snook - SMACSS
• Yandex - BEM Methodology
• Harry Roberts - inuit.css
• Jacob Thornton and anyone who has contributed to Twitter Bootstrap
• Any developer interested in creating modular, reusable, CSS

Modifiers.css

/* Modifier names from around the Web
--------------------------------------------------*/

/* Works well with navigation 
 * ----------------------------------------
 * Example: .nav--main, .nav--breadcrumbs, .nav--pagination
 */
--breadcrumbs {}
--main {}
--pagination {}
--pills {}
--stacked {}
--tabs {}


/* Works well with images/grids
 * ----------------------------------------
 * Example: .img--left, .img--center, .col--pull-left
 */

--left {}
--pull-left {}
--push-left {}
--right {}
--pull-right {}
--push-right {}
--center {}
--rounded {}
--circle {}
--polaroid {}


/* Works well with alerts
 * ----------------------------------------
 * Example: .alert--success, .alert--warning
 */

--success {}
--warning {}
--danger {}
--info {}
--primary {}
--secondary {}


/* Works well with forms
 * ----------------------------------------
 * Example: .form--inline, .form--search, .form--horizontal
 */

--additional {}
--note {}
--stacked {}


/* Works well with labels
 * ----------------------------------------
 * Example: .label--stacked, .label--note, .label--additional
 */

--additional {}
--note {}
--stacked {}


/* Works well with inputs, selects, texatareas
 * ----------------------------------------
 * Example: .input--select, .input--textarea
 */

--select {}
--textarea {}


/* Works well with pages/links 
 * ----------------------------------------
 * Example: .page--current, .link--current, .nav-item--current
 */

--current


/* Works well with uls
 * ----------------------------------------
 * Example: .list--numbered
 */

--numbered {} /* Have a numbered `ul` without the semantics implied by using an ol. */


/* Works well with tables
 * ----------------------------------------
 * Example: .table--striped, .table--data, .table-bordered
 */

--bordered {}
--data {}
--striped {}

Modules.css

/* Module names from around the Web
--------------------------------------------------*/
    
/* Misc. Module names
----------------------------------------*/
.caption {}
.control-set {}
.copyright {}
.form {}
.form-row {}
.group{}
.heading {}
.icon {}
.input {}
.list {}
.matrix {}
.slideshow {}
    
    
/* Module names from inuit.css
 * https://github.com/csswizardry/inuit.css
----------------------------------------*/
.cite {}
.extra-help {}
.field {}
.form-fields {}
.hN {} /* Heading with no specific semantic hierarchy as opposed to h1, h2, h3, etc. */
.img {}
.label {}
.progress-bar {}
.source {}
.table {}
.text-input {}
    
    
/* Module names from Twitter Bootstrap
 * https://github.com/csswizardry/inuit.css
----------------------------------------*/
.accordion {}
.alert {}
.btn {}
.carousel {}
.container {}
.dropdown {}
.dropup {}
.control-group {}
.form-actions {}
.help {}
.hero-unit {}
.media {}
.modal{}
.navbar {}
.nav {}
.pager {}
.pagination {}
.popover {}
.progress {}
.tabs {}
.well {}

Subcomponents.css

/* Component naming patterns from  around the Web
--------------------------------------------------*/

/* Example of components of a .modal module from Twitter Bootstrap
 * 
 * <div class="modal">
 *   <div class="modal-header">
 *     <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
 *         <h3>Modal header</h3>
 *    </div>
 *    <div class="modal-body">
 *      <p>One fine body…</p>
 *    </div>
 *  <div class="modal-footer">
 *    <a href="#" class="btn">Close</a>
 *        <a href="#" class="btn btn-primary">Save changes</a>
 *  </div>
 * </div>
 *
 */ 
.modal-header {}
.modal-body {}
.modal-footer {}

/* Additional components that could be used with .modal */
.modal-wrap {}
.modal-inner {} /* prefer inner to wrap. Inner can be a component inside of modal, where .modal-wrap is a component outside of .modal{} */

/* You could shorten the component names if desired */
.modal-hdr {}
.modal-bdy {}
.modal-ftr {}
.modal-innr {}