FLOCSSでやるCSS設計

インターン先で刺激を受けたのでアウトプットしていきます。

今回の記事ではFLOCSSを使用していく前提で書きます。

 

もくじ

  1. 基本構造
  2. 概要
  3. 命名規則
  4. クラスについて
  5. 最後に

 

1. 基本構造

f:id:yuu_4:20181009110345p:plain

  • fundation: reset,base等の基盤

  • layout: header,footer等の構造

  • object:

  • component: 繰り返し再利用する要素を定義する

  • project: コンテンツを構成する要素を定義する

  • utility: componentが独自に持つべきではないプロパティを定義する

 

app.scssにimportで読み込んであげるとモジュールの追加や削除が楽になります。 

 

2. 概要

まずFLOCSSとは何か?

FLOCSS(フロックス) は、OOCSSやSMACSS、BEM、SuitCSSのコンセプトを取り入れた、モジュラーなアプローチのためのCSS構成案です。

https://github.com/hiloki/flocss より抜粋

 

簡単に言うと「色々な設計から良いとこ取りした設計方法」。

 

3. 命名規則

 BEMのMindBEMdingを使う。

MindBEMdingとはBlock,Element,Modifierで構成する命名規則

  • Block: 構成の元となる要素
  • Element: Blockの中に存在する子要素
  • Modifier: BlockまたはElementが変化した状態の要素

 

必ずBlockが一番先頭にきて、その後にElementやModifierが付く形となる。

Elementが付く場合はアンダースコア2つ( __ )で区切り、Modifierが付く場合にはハイフン( - )で区切る。

 

使用例 

  • .block__element
  • .block-modifier
  • .block__element-modifier
  • .block-modifier__element

 

 しかしこのままだとかなり冗長になってしまうのでSassを使い短くします。

.block{

    …

    &__element{

        …

        &-modifier{ … }

    }

    &-modifier{

        …

        &__element{ … }

    }

} 

&で区切ることによっていちいちblockを書かなくて済みます。

クソ楽。

 

4. クラスについて

シングルクラスかマルチクラスのどちらのが良いかというのについてはコードの複雑さによると思います。

 

個人的にシングルクラスを使う場面

  • コードが複雑になりそう
  • スタイルの打ち消しがない
  • HTMLの見た目がスッキリする

マルチクラスを使う場面

  • コードが単純
  • スタイルの打ち消しがある

 

シングルクラスにするときはextendで継承させると思いますがモジュール内で完結する場合のみの使用が好ましいです。 

 

5. 最後に

まだまだ改善の余地はあると思いますが、使い慣れればそこそこ使いやすく管理しやすいのがFLOCSSのメリットです。

チームでコーディングをする際は是非使ってみてください。

laravelで認証機能を構築する

laravelをちょくちょく触ってました。

色々調べてたら認証機能を高速で構築する方法があったのでそれについて。

 

環境変数を少し書くだけで実装出来るのはとてもありがたいですね。

メールサーバーについてはmailtrapを使ってみました。GoogleGitHubのアカウントでログイン出来るのでとてもスピーディーに確認出来てとても良かったです。

 

 Viewの作成

$ php artisan make:auth

実行するとauthというフォルダが作られています。

http://localhost:8000にアクセスして見ると

f:id:yuu_4:20180903001301p:plain

 右上にLoginとRegisterが追加されています。

とりあえずこれでViewは終わりです。

 

マイグレーションする

次にデータベースを作成していきます。

今回はMySQLを使います。

mysql> create database laravel-sample;

データベースを作成したら一旦laravel/.envに環境変数を書きましょう。

DB_DATABASE=laravel-sample
DB_USERNAME=username
DB_PASSWORD=password

laravel/.env内の環境変数を上のように書き換えていきます。

書き換えたらマイグレーションを実行します。

$ php artisan migrate

先ほど作成したlaravel-sampleの中を見てみるとusersというテーブルが出来ているのが確認できます。

これで認証機能が出来ました!

とはいえ必要最低限のことしかしていませんので次回はもう少し詳しく書いていきます。

Laravel + React環境構築

今作ってる作品の環境構築で結構楽に出来たので忘れないうちに

 

プロジェクト作成

$ composer create-project laravel/laravel --prefer-dist プロジェクト名 5.6

$ cd プロジェクト名

$ php artisan preset react(VueからReactへ切り替え)

$ npm install

 

Reactへの切り替えが上記のコマンドで出来ないならwebpack.min.jsの中のjsをreactに書き換える

 

サンプル

最小構成

resources/assets/js/components/hello.js

import React, { Component } from 'react';

export default class Hello extends Component {

render() {

return Hello World!!

}

}

resources/assets/js/app.js

import React, { Component } from 'react';

import { render } from 'react-dom';

import Hello from './components/hello';

render(</Hello>, document.getElementById('root'));