FLOCSSでやるCSS設計
インターン先で刺激を受けたのでアウトプットしていきます。
今回の記事ではFLOCSSを使用していく前提で書きます。
もくじ
- 基本構造
- 概要
- 命名規則
- クラスについて
- 最後に
1. 基本構造
-
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を使ってみました。GoogleやGitHubのアカウントでログイン出来るのでとてもスピーディーに確認出来てとても良かったです。
Viewの作成
実行するとauthというフォルダが作られています。
http://localhost:8000にアクセスして見ると
右上に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'));