CSS guideline

CSS guideline

Review

• FLOCSS
  • Basic concept
  • File structure
  • Foundation
  • Layout
  • Object
  • Foundation
  • Foundation
• BEM

FLOCSS

🌎 Basic concept

Foundation Layout Object 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           /* Manages small units of modules (buttons, etc.)
         |     ├── button.sass
         |     ├── card.sass
         |     ... 
         ├── project             /* Manages a big unit module composed of several ↑ components and other elements
         |     ├── _card.sass
         |     ├── _profile.sass 
               ...   
         ├── utility             /* Manages styles that cannot be solved by Component and Project modifiers (patterns) and useful classes for adjustment.
         |     ├── _utility.sass
         |     ├── _color.sass 
         |     ├── _margin.sass 
         |     └── _padding.sass     
         └── theme               /* Color switching by theme, different colors for page units 
               ├── _blue.sass
               ...
   

🧶Foundation

Manages default style of the entire site

• _reset.sass - Defines css to reset the default style of the browser
• _base.sass - Defines style, which is the basic foundation when constructing a site
• Basically, the style should be defined in the tag itself.
• Keep in mind that it will be minimally displayed even without a class.

📗 Layout

Manages the styles of headers, main content areas, sidebars, footers, etc., that make up each page, for each area.

• Define the style for the layout as seen from the entire page
• Only the outer frame is defined. Do not include child elements as much as possible
• The contents of the header and footer are defined by p-

//Style for layout as seen from the entire page

.l-header
  position: fixed
  top: 0
  left: 0
  z-index: 100
  width: 100%

//Style of the header part
.p-header
  display: flex
  &__logo
    width:100px
    height:50px

• _header.sass - defines the style of the header. +

  • l-nav.sass - depending on the screen structure, nav may be included in l-header as p-nav, but if the outline of l- is easier to do, Layout is okay.

• _main.sass - defines a common style for the main content area

  • Offsets and margins for fixed headers, etc.
  • Here, only the common top, bottom, left, and right margins are defined.

• _container.sass - specifies the content width in the main area of the site.

• _footer.sass - define the style of the footer area.

📦 Object