A SMACSS-like CSS achitecture that uses the hyphenated BEM methodology and namespacing to ensure fewer styling rules, long-term maintainability, faster team onboarding, and hopefully performance gains. Inspired by: https://robots.thoughtbot.com/architecting-front-end-styles. Difference between components and modules: http://programmers.stackexch…

css-architecture.md

scss/ 
|
|– base/ ** All HTML-only styles.
|   |– _html.scss           
|   |– _body.scss   
|   |– _input.scss   
|   |– _button.scss   
|   ...
|
|– components/ ** Small, immutable, single-selector classes. Smaller than a module, used on single DOM elements. NO block elements, modifiers OK, theming OK, NO state classes. Prefix files and classes with 'c-'.
|   |– _c-buttons.scss     
|   |– _c-icons.scss
|   |– _c-inputs.scss
|   |– _c-links.scss   
|   ...
|
|– modules/ ** Larger patterns. Block elements OK, modifiers OK, theming OK, state classes OK. Prefix files and classes with 'm-'.
|   |– _m-forms.scss     
|   |– _m-hero.scss          
|   |– _m-nav.scss       
|   |– _m-sidebar.scss       
|   ...                    
|
|– objects/ ** Layout only patterns. Block elements OK, modifiers OK, NO theming, NO state classes. Prefix files and classes with 'o-'.
|   |– _o-grid.scss  
|   |– _o-media-object.scss  
|   |– _o-flag.scss  
|   ...                    
|
|- settings/ ** SCSS variable declaration settings.
|   |– _var-color.scss
|   |– _var-spacing.scss
|   |– _var-text.scss
|   ...                    
|
|- tools/ ** SCSS functions, mixins. Prefix file with SCSS language feature, e.g., function, mixin, placeholders.
|   |– _function-em.scss
|   |– _functions-rem.scss
|   |– _mixins-breakpoints.scss
|   |– _mixins-clearfix.scss
|   |– _mixins-gradual-media-queries.scss 
|   ...
| 
|- utilites/ ** Single purpose utility helpers each isolated their own partial. Prefix files and classes with 'u-'.
|   |– _u-float.scss          
|   |– _u-hide.scss 
|   |– _u-mute.scss
|   ...                  
|
|– main.scss ** Include in this order: settings, tools, base, components, objects, modules, utilities.
|