FLOCSS CSS_design

Hellow! I have been an engineer for one year.

Overview
Since I made LP with FLOCSS, I describe my own way of making and its impressions.
(There is a sample site)

About FLOCSS
Please see the repository below for details.
https://github.com/hiloki/flocss/blob/master/README_eng.md

Advocate
https://twitter.com/hiloki

For more detailed usage etc. please refer to this article.(JP_only)
https://qiita.com/sueshin/items/dcbaf3d8a0adb6b087db

My current development environment

base
    _reset.scss
    _setting.scss
component
    I will add a component system scss file here.
fonts
    Font type file
helper
    mixin etc.
inc
    Import the part for each directory.
    _component.scss
    _layout.scss
    _page.scss
layout
    Layout system scss file is added here.
page
    Scss file in page units
style.scss
    Import whole file
vendor
    Dedicated directory such as external API

New layout created for FLOCSS

base
    No Change
fonts
    No Change
helper
    No Change
inc
    No Change
object
    layout　 l-Prefix scss file
    component　c-Prefix scss file
    project p-Prefix scss file
    utility u-Prefix scss file
page
style.scss
vendor

Introduction

It was often a problem that HTML and CSS easily collapsed.
Although it can not completely prevent the collapse, attempts to prevent even a little by bringing in design rules are CSS design rules such as BEM, SMACSS, and FLOCSS introduced this time.
I myself have a short engineering experience, but I am already aware of the importance of design rules.

I think that you can understand if you can see "current my development environment"
When increasing the basic CSS parts, add it to the [component] directory.
There is no prefix, etc., the lead engineer will describe freely.
In the current workplace, there are at most two engineers at all times, so there is no particular problem with this design method, so rather than deciding too detailed design rules, anyone can easily participate in the construction I am doing it.

Then why, when I say that I introduced FLOCSS, if you continue to increase the number of files in the above component, the file will be approximately 70 to 100 files in the component directory.
If it is this number, it is not difficult to follow the file yet. However, if you become a larger site in the future, there is concern that files will continue to increase without order,
Also, when overwriting between components occurred, it was necessary to overwrite the component file in the component file, making tracking of the class name difficult.

When you look at the advice readme, FLOCSS recognizes the availability by the development site to some extent while having basic rules.
In my case always
layout
project
component
The rule order is the order of description.

Basic pattern

<div class="l-layout">
    <div class="p-project">
        <span class="c-component"></span>
    </div>
</div>


c-component When overwriting


<div class="l-layout">
    <div class="p-project">
        <span class="p-project_component c-component"></span>
    </div>
</div>

When attaching a modifier to c-component

<div class="l-layout">
    <div class="p-project">
        <span class="c-component -is-red"></span>
    </div>
</div>

merit and demerit

merit
Layout
Project
Component
Since it protects the hierarchy of components, components such as components are not complicated.
By vigorously making it a part of the project, it became easier for the resultant fit.
Easy to find files
With light tied it makes it easier to write CSS.

Demerit
When developing with multiple people, some explanation is necessary for those who participate in development later
Because there are rules, it collapses if there is no common recognition.
Ultimately the separation of Component and Project ends up becoming individual's discretion.
(I feel that any design philosophy can not be avoided.)

Sample site

Up to this point it was an explanation of a simple self development environment, but when it was introduced for the first time,
This became project? Component ?, and it got dreaded quite a bit.
Now the introduction results are several, and although it can be made into rules to some extent in myself, I think that there are a lot of confusion at the beginning at first.
So I will publish the test site that I assumed LP to this URL.

caution !!!
Because it is diverted from actually published site, the element which originally existed is removed, unnecessary property is applied.
I think that if you can reference the granularity of the class name and the granularity of the project and the component rather than the design itself.
I think that it will be added even if even a little to FLOCSS trying.

http://rin-develop.jeez.jp/flocss/

FLOCSS base_static github
https://github.com/TakuyaTaniguchi/static_develop