├── README.md ├── components.css ├── modifiers.css └── subcomponents.css /README.md: -------------------------------------------------------------------------------- 1 | CSS Components, Modifiers, and Subcomponents Collection 2 | ======================================================= 3 | 4 | A collection of common CSS component, modifier, and subcomponent class names from around the web. 5 | 6 | ## What are CSS components, modifiers, and subcomponents? 7 | 8 | Recently I've been researching [SMACSS](http://smacss.com) by [Johnathan Snook](https://twitter.com/snookca) and the [BEM Methodology](http://bem.info/) by Yandex as well as examing my own 9 | style of crafting CSS. I've started adopting an approach based on SMACSS that uses the **Base, Layout, Module, State** 10 | approach for structuring my CSS, though I'ved expanded on the concept of modules based on my research 11 | into the BEM methodolgy. I've started using a pattern which I refer to it as **Component, Modifier, and Subcomponent**. 12 | 13 | ### Components 14 | 15 | The concept of components is the same concept of modules described in SMACSS. So if your fimiliar with SMACSS, you already know what a component is. 16 | A few examples of componentss that come to mind are things like: 17 | 18 | `.nav, .alert, .btn, .modal` 19 | 20 | 21 | ### Modifiers 22 | 23 | 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. 24 | The concept is simple, we use modifiers to modify instances of a component or sub-component. Some examples of modifiers are things like 25 | 26 | `--breadcrumbs, --success, --submit` 27 | 28 | Modifiers are added onto components or subcomponents to expand their basic functionality for specific cases. 29 | 30 | Examples of the above modifiers in use would look like: 31 | 32 | `.nav--breadcrumbs, .alert--success, .btn--submit` 33 | 34 | ### Subcomponents 35 | 36 | Subcomponents are the inside parts of a component, if it has any. They make up the component. For example, with a .modal module you might have the following components: 37 | 38 | `.modal-header, .modal-body, .modal-footer` 39 | 40 | Another example would be a `.post` component. With it, you have to following subcomponents: 41 | 42 | `.post-title, .post-date, .post-author, .post-thumb, .post-entry, etc.` 43 | 44 | ## What is this repo? 45 | This repo is simply a collection of common component, modifier, and subcomponent 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 components, modifiers, and subcomponents to help create more standardization in my projects. 46 | 47 | ## More thoughts on HTML Class naming conventions. 48 | I've jotted down some thoughts on [HTML Class naming conventions](http://www.brettjankord.com/2013/03/06/more-thoughts-on-html-class-naming-conventions/) on my blog. Have a certain way you name your modules, subcomponents, and modifiers? Let me know. 49 | 50 | ## Credit 51 | 52 | - [Johnathan Snook](https://twitter.com/snookca) - [SMACSS](http://smacss.com) 53 | - Yandex - [BEM Methodology](http://bem.info/) 54 | - [Harry Roberts](https://twitter.com/csswizardry) - [inuit.css](http://inuitcss.com/) 55 | - [Jacob Thornton](https://twitter.com/fat) and anyone who has contributed to [Twitter Bootstrap](http://twitter.github.com/bootstrap/) 56 | - Any developer interested in creating modular, reusable, CSS 57 | -------------------------------------------------------------------------------- /components.css: -------------------------------------------------------------------------------- 1 | /* Component names from around the Web 2 | --------------------------------------------------*/ 3 | 4 | /* Misc. Component names 5 | ----------------------------------------*/ 6 | .caption {} 7 | .control-set {} 8 | .copyright {} 9 | .featured {} 10 | .form {} 11 | .group{} 12 | .heading {} 13 | .highlight {} 14 | .icon {} 15 | .input {} 16 | .list {} 17 | .matrix {} 18 | .slideshow {} 19 | .billboard /* for a 'hero' section - https://twitter.com/csswizardry/status/385383475743694848 */a 20 | 21 | 22 | /* Component names from inuit.css 23 | * https://github.com/csswizardry/inuit.css 24 | ----------------------------------------*/ 25 | .cite {} 26 | .extra-help {} 27 | .field {} 28 | .form-fields {} 29 | .hN {} /* Heading with no specific semantic hierarchy as opposed to h1, h2, h3, etc. */ 30 | .img {} 31 | .label {} 32 | .progress-bar {} 33 | .source {} 34 | .table {} 35 | .text-input {} 36 | 37 | 38 | /* Component names from Twitter Bootstrap 39 | * https://github.com/csswizardry/inuit.css 40 | ----------------------------------------*/ 41 | .accordion {} 42 | .alert {} 43 | .btn {} 44 | .carousel {} 45 | .container {} 46 | .dropdown {} 47 | .dropup {} 48 | .control-group {} 49 | .form-actions {} 50 | .help {} 51 | .hero-unit {} 52 | .media {} 53 | .modal{} 54 | .navbar {} 55 | .nav {} 56 | .pager {} 57 | .pagination {} 58 | .popover {} 59 | .progress {} 60 | .tabs {} 61 | .well {} 62 | -------------------------------------------------------------------------------- /modifiers.css: -------------------------------------------------------------------------------- 1 | /* Modifier names from around the Web 2 | --------------------------------------------------*/ 3 | 4 | /* Works well with navigation 5 | * ---------------------------------------- 6 | * Example: .nav--main, .nav--breadcrumbs, .nav--pagination 7 | */ 8 | --breadcrumbs {} 9 | --main {} 10 | --pagination {} 11 | --pills {} 12 | --stacked {} 13 | --tabs {} 14 | 15 | 16 | /* Works well with images/grids 17 | * ---------------------------------------- 18 | * Example: .img--left, .img--center, .col--pull-left 19 | */ 20 | 21 | --left {} 22 | --pull-left {} 23 | --push-left {} 24 | --right {} 25 | --pull-right {} 26 | --push-right {} 27 | --center {} 28 | --rounded {} 29 | --circle {} 30 | --polaroid {} 31 | 32 | 33 | /* Works well with alerts 34 | * ---------------------------------------- 35 | * Example: .alert--success, .alert--warning 36 | */ 37 | 38 | --success {} 39 | --warning {} 40 | --danger {} 41 | --info {} 42 | --primary {} 43 | --secondary {} 44 | 45 | 46 | /* Works well with forms 47 | * ---------------------------------------- 48 | * Example: .form--inline, .form--search, .form--horizontal 49 | */ 50 | 51 | --inline {} 52 | --search {} 53 | --horizontal {} 54 | 55 | 56 | /* Works well with labels 57 | * ---------------------------------------- 58 | * Example: .label--stacked, .label--note, .label--additional 59 | */ 60 | 61 | --additional {} 62 | --note {} 63 | --stacked {} 64 | 65 | 66 | /* Works well with inputs, selects, texatareas 67 | * ---------------------------------------- 68 | * Example: .input--select, .input--textarea 69 | */ 70 | 71 | --select {} 72 | --textarea {} 73 | 74 | 75 | /* Works well with pages/links 76 | * ---------------------------------------- 77 | * Example: .page--current, .link--current, .nav-item--current 78 | */ 79 | 80 | --current 81 | 82 | 83 | /* Works well with uls 84 | * ---------------------------------------- 85 | * Example: .list--numbered 86 | */ 87 | 88 | --numbered {} /* Have a numbered `ul` without the semantics implied by using an ol. */ 89 | 90 | 91 | /* Works well with tables 92 | * ---------------------------------------- 93 | * Example: .table--striped, .table--data, .table-bordered 94 | */ 95 | 96 | --bordered {} 97 | --data {} 98 | --striped {} 99 | 100 | 101 | /* Works well with hero images/slideshows 102 | * ---------------------------------------- 103 | * Example: .hero--slideshow, .hero--graphic if single image is used 104 | */ 105 | 106 | --slideshow {} 107 | --graphic {} 108 | -------------------------------------------------------------------------------- /subcomponents.css: -------------------------------------------------------------------------------- 1 | /* Component naming patterns from around the Web 2 | --------------------------------------------------*/ 3 | 4 | /* Example of components of a .modal module from Twitter Bootstrap 5 | * 6 | *
7 | *
8 | * 9 | *

Modal header

10 | *
11 | *
12 | *

One fine body…

13 | *
14 | *
15 | * Close 16 | * Save changes 17 | *
18 | *
19 | * 20 | */ 21 | .modal-header {} 22 | .modal-body {} 23 | .modal-footer {} 24 | 25 | /* Additional components that could be used with .modal */ 26 | .modal-wrap {} 27 | .modal-inner {} /* prefer inner to wrap. Inner can be a component inside of modal, where .modal-wrap is a component outside of .modal{} */ 28 | 29 | /* You could shorten the component names if desired */ 30 | .modal-hdr {} 31 | .modal-bdy {} 32 | .modal-ftr {} 33 | .modal-innr {} 34 | 35 | 36 | 37 | /* From _S Theme 38 | --------------------------------------------------*/ 39 | .site-header {} 40 | .site-nav {} 41 | .site-footer {} 42 | --------------------------------------------------------------------------------