FLOCSS CSS_design
Tags: html, css, scss
Published: 2018-11-04 06:30:45

---
title:  FLOCSS CSS_design
published: true
description: FLOCSS CSS_design sample_site
tags: HTML,CSS,SCSS
---

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.
(<a href="http://rin-develop.jeez.jp/flocss/">There is a sample site</a>)


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

```html:build.txt
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

```html:build_new.txt
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.


```html:index.html
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