Scalable Modular Architecture for CSS
What is SMACSS?
Creator Jonathan Snook, says SMACSS “is a way to examine your design process” and “an attempt to document a consistent approach to site development when using CSS”.
After more discuss about SMACSS i will discuss about css modular and scalable architecture.Several methods have emerged to help designers write scalable and modular CSS.Modular code is reusable code. It can be combined in a variety of ways, making it flexible and scalable, allowing you to iterate code blocks independently and leading to better performance and more maintainable sites.
Four popular methods for writing modular CSS
- Scalable Modular Architecture for CSS (SMACSS)
- Object Oriented CSS (OOCSS)
- Don’t Repeat Yourself CSS (DRY CSS)
- Block, Element, Modifier (BEM)
Each methods are common goals and concepts, though are take different approaches to how to achieve those goals.Each should be considered as more of a general guideline than absolute rule.
Describe Scalable Modular Architecture for CSS (SMACSS)
At the very core of SMACSS is categorization. By categorizing CSS rules, we begin to see patterns and can define better practices around each of these patterns.
There are five types of categories:
- Base
- Layout
- Module
- State
- Theme
1.Base rules
Base rules are the defaults. They are almost exclusively single element selectors but it could include attribute selectors, pseudo-class selectors, child selectors or sibling selectors. Essentially, a base style says that wherever this element is on the page, it should look like this.
Base
_base.scss
_mixin.scss
_normalize.scss
_variables.scss
2.Layout rules
Layout rules divide the page into sections. Layouts hold one or more modules together.
Layout
__header.scss
__nav.scss
__sitebar.scss
__footer.scss
___section.scss
3.Modules rules
Modules are the reusable, modular parts of our design. They are the callouts, the sidebar sections, the product lists and so on.
Modules
___blocks.scss
___buttons.scss
___componentes.scss
___typography.scss
4.State rules
State rules are ways to describe how our modules or layouts will look when in a particular state. Is it hidden or expanded? Is it active or inactive? They are about describing how a module or layout looks on screens that are smaller or bigger. They are also about describing how a module might look in different views like the home page or the inside page.
5.Theme rules
Finally, Theme rules are similar to state rules in that they describe how modules or layouts might look. Most sites don’t require a layer of theming but it is good to be aware of it.
Thank you.
You may have reached the end of this blog but there’s still plenty more.
