こんにちは。
ウェブカツで学びながら、WEBディレクターをしています。
ここのところ、以下レッスンの宿題にかかりきりであまり先に進めませんでした。
Lesson13｜CSS設計〜ディレクトリルールまで決めたFLOCSS〜
宿題は、SASSのファイルをFLOCSSの規約に基づいて書き直すというものです。
今日ようやく形になったので、ブログを書きます。
<1>成果物はこちら
・実際のみため
https://htmlcssjavascript0716.com/01_flocss_exmple/
・SCSSの構成などを見るためのGitHub
https://github.com/khosokawa0716/flocss-example
<2>かかった時間
12時間
<3>学んだこと
・CSSを書き直すには、HTMLファイルのクラスとの紐付けを調査する必要がある
・CSSの正解は分かりづらい。HTMLのクラスと紐付けがなくても、
文法として正しければ成立してしまう。
・SASSでネストするときに、異なる階層に同じクラス名を使わない。
・分割したscssを統合するapp.scssの記述は、上から読み込まれる。
_var.scssを下に記述にするとコンパイルできない。
・jsのプレフィックスは必ず付けておく。
・style.scssからapp.scsslに変更する場合は、package.jsonのscriptの記述も修正する。
・GitHubへのアップロード方法
<4>感じたこと
12時間。まさか宿題に着手する前にこれだけの時間をかけるとは思いませんでした。
始める前は、1時間もかからないだろうとタカをくくっていました。
だってHTMLとCSSですよ。いくらウェブカツの上級コースと言ったって、
一応業務でHTMLとCSSは触っていますからね。
しかもたった１ページでしょ。それに1からコード書くわけではなくて、すでに出来ているのを
直すだけでしょう。完全になめてました。
ファイルを分けるところまでは良かったです。
ブログに記載がある通りに、ファイルを分割していきました。
つまづいたのは、containerの扱いです。まずクラスのままにしておくのか、
Idに変更するのか。まぁ大した問題ではないですよね。どちらからに決めればいいだけです。
ところがもとのコードを見ていると、、、、、
Container-titleが2つあります。containerの直下とcontainer-ornamentの中にも
Container-titleがあります。
この紐付けを確認するのに、かなり時間を使いました。
クラス名なんて、エディタで一括置換すればいいでしょと思っていましたが、
そういうわけにはいきません。スタイルがあたっているところを確認しながら、
一つずつ変更をしました。
それでもいったんコンパイルしてブラウザで確認すると、間違っているところがありました。
SASSの入れ子の構造はとても便利ですが、気をつけないと大きな不具合になりそうです。
個人的な好みですが、id（#{）はcssに使わない方がよいと思いました。
id=contactのところにcssが書かれていなかったので、うっかり消してしまいそうになりました。
Htmlのリンクとして使われていたんでした。
アウトプットが足りなくて、いろいろ調べながら修正したため時間がかかりました。
でもいいんです。こうやって宿題を与えられてアウトプットできたんですから。
GitHubにコードをあげたのも初めてです。
レッスンは進んでいないですが、たくさんの収穫がありました！
最後まで読んでいただいてありがとうございました。
GitHubのコードも読んで、コメントいただけるとうれしいです。↓もう一度PR
https://github.com/khosokawa0716/flocss-example
コメント