CSS guideline

CSS guideline

Review

• FLOCSS
  • Basic concept
  • File structure
  • Foundation
  • Layout
  • Object
    • Component
    • Project
    • Difference between Component and Project
• 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

File	Contains
_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

File	Contains
_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

All repeating visual patterns throughout the site are defined as Objects.

• 🥝Component

  • Defines a small unit module as a reusable pattern.

     _button.sass
     _grid.sass
     _input.sass
    

  • !!! Margins and positions are not defined !!!. They should be treated as parts to the last

    <div className="c-card">
      <div className="c-card__button c-button"></div>
    </div>

    //Bad
    .c-button
      margin-bottom: 30px
      margin-left: 20px
    
    //Good
    .c-card
      display: flex
      &__button
        margin-bottom: 30px
        margin-left: 20px

  • Flexbox layout system is also componentized.

    • The flexbox layout system (row, col etc. in Bootstrap4) seems to be managed as Layout, but it is managed as Component.
    • The reason is that it is not always a common area on each page.
    • Container is definitely on the page, but the row is not always there. It comes out without regularity, so don't make it Layout.

• 🧰Project

  • Flexbox layout system is also componentized.
  • Manages what is composed of several Components and elements that do not correspond to them. In other words:
    • when you want to collect small units of Components and treat them as one Object
    • when the Object is too large to be a Component

• 🧰🥝Difference between Component and Project

  • Difference between Component and Project - Ozlink LAB | Marketing Agency Co., Ltd. Oz link

  • Problems and solutions in CSS design using FLOCSS - Qiita

  • Let’s suppose a small unit be a Component and a collection of Components to be a Project.

    • Since Component must be treated as a Project (aggregate), it is recommended to give the class name that represents the hierarchy to the text or icon class name as a Project.

    • Example** (when changing the material, assume that sushi is a component)