- Originally published: June 7, 2015
- Revised date: April 21, 2016
SMACSS, standing for Scalable and Modular Architecture for CSS, is used to structure code for projects large and small. It is a way to examine your design process and as a way to fit those rigid frameworks into a flexible thought process. It is an attempt to document a consistent approach to site development when using CSS. This is a guide to how I deal with the framework.
Base rules (aka Global) is applied to an element using an element selector, a descendent selector, or a child selector, along with any pseudo-classes. It doesn’t include any class or ID selectors. It is defining the default styling for how that element should look in all occurrences on the page.
_reset.scssor_normalize.scssCSS Normalize is handled by Foundation_settings.scssFoundation settings file_typography.scss
Helper rules (aka libraries/ or utils/) folder gathers all Sass tools and helpers used across the project. Sass functions, mixins and placeholders are placed in here. This folder also contains a _variables.scss file which holds all global variables for the project.
_variables.scssTheme specific variables handled by Foundation_functions.scssSass Functions_mixins.scssSass Mixins_helpers.scssClass & placeholders
Component rules (aka modules/) folder is used for smaller components. It can contain all kinds of specific modules like a slider, a loader, a widget, or anything along those lines. There are usually a lot of files in components/ since your site is should be mostly composed of tiny modules.
_buttons.scss_featured-image.scss_dividers.scss_links.scss
Module rules (aka layout/ or partials/) folder is used for larger components. These modules should be a collection of components and layout. Each of them setting some styles for the main sections of the layout (header, footer, and so on).
_header.scss_navigation.scss_footer.scss_sidebar.scss
Template rules (aka pages/ or sections/) folder contains page-specific styles. For example, it’s not uncommon to have very specific styles for the home page, so you’d have a _front.scss file in templates/ dealing with this.
_front.scss_page-default.scss_page-full-width.scss_page-sidebar-left.scss_single-post.scss
Depending on your deployment process, those files could be called on their own to avoid merging them with the others in the resulting stylesheet. It is really up to you. Where I work, we decided to make them not-partials in order to include them only on pages requiring them. For example, our home page has a very specific layout, compiling to about 200 lines of CSS. To prevent those rules from being loaded on every page, we include this file only on the home page.
This readme file is a compilation of SMACSS Website, SitePoint Article and my collective knowledge.