CSS guideline

CSS guideline

Review

• FLOCSS
  • Basic concept
  • File structure

FLOCSS

🌎 Basic concept

Foundation Layout Object CSS - CSS design concept that takes advantage of OOCSS, BEM, and SMACSS. CSS design concept often used in Japan devised by Hiroki tani CSS organization methodology.

• FLOCSS documentation - Github
• Introduction to FLOCSS - Youtube

📂 File structure

style
   └── foundation            /* Manages the default style of the entire site
   |     ├── _reset.sass
   |     ├── _base.sass
   |     ├── _variable.sass  /* Variables that can be used throughout the site
   |     └── _mixins.sass    /* Manages mixns that can be used throughout the site
   └── layout                /* Manages areas that make up each page and common to the entire site
   |     ├── _base.sass
   |     ├── _variable.sass   
   |     └── _mixins.sass    
   └── object                /* Manages modules with reusable throughout the entire site patterns
   |     ├── component
   |     ├── project   
   |     └── utility