ポートフォリオを作り始めて無料で公開する（scssの基本構成を作った）

2466 ワード
HTML JavaScript scss flocss ポートフォリオ HTML テキストリンク

ポートフォリオを作り始めて無料で公開する（Webpack4使ってみた）の続きです。
　
作りかけのポートフォリオ

過去に無秩序で膨大なCSSの保守をやって、敗北した経験がありました。
死んだ目付きで脱・CSS無法地帯。FLOCSSで指針のある設計を。とか眺めながら、
自分が次に何かちゃんと作る時は、CSSの設計方式に則った形で、是非やりたいなって思ってました。

過去に色々ググってみた際、幾つかある方式の中でも、「FLOCSS」という設計方式が
自分としては良さげな印象だった記憶があります。

ただ、今はその一点の習得に掛ける時間も無いし、規模も小さく、触るのは自分だけなので、
もっと、シンプルな思想の方式の提案を見つけて、真似させてもらいました。
参考：FLOCSSを扱いきれないあなたに贈る、スリムなCSS設計の話

「FLOU」という思想のようです。

で、今の構成がこんな感じ。
とは言え、ポートフォリオ制作で、中身の構成はどーでもいいのでしょうけど。

・foundation.scss
・layout.scss
・object.scss
・utility.scss

の基本構成4ファイルをstyle.scssにまとめて一つにしてます。

style.scss
@import './shared/foundation.scss';
@import './shared/layout.scss';
@import './shared/object.scss';
@import './shared/utility.scss';

そして、index.jsで、style.scssをimportして、Webpackで全部一括読み込みしてます。

index.js
import './style.scss';

やりたい事がたくさんありますが、まだ阿部寛の公式サイトにも及んおりません。

完全に無駄に、i18nextでローカライズ対応して思うように行かず、時間費やしてしまった。
でも、フロントだけでローカライズ対応したい事ってあるのかな？