PugとSassのバランス

今現在取り組んでいるしょーごさんのコーディング課題【中級Ex編】からpugを取り入れ

CSS設計はFLOCSSを採用してみています。

「修正が入った場合を想定して」コーディングするように今回は意識をしてディレクトリ構成などをpugもうまく取り入れたうえでやってみようと取り組んでいます。

ProjectやComponentsという考え方をどちらの言語にも取り入れて、それをできるだけ対応させるようにコーディングしていましたが、あるタイミングでこの考え方は少し間違っているということに気づきました。

というのも、pugの同じような構成のProjectに対してそれに対応するscssファイルを複数作成してしまうと、単純にデータ容量が倍になります。

それだけでなく、詳細度的にもマズイことになってしまうことに気づき、この考え方を修正することにしました。

❶とにかくscssファイルはむやみに増やさないこと。
→特に下層ページなどで構成が似たような状況になっている時には要注意。
似ている箇所はそのままに、そのページ特有のものがあるなら「マルチクラス」で対応
出来ないか考えるようにする。

❷これは学習がひと段落したら取り入れてみようと思うのですが
Pugの継承「extend」を使って、もっと効率の良いコーディングができないか
と考えています。今は1種類のextendしか使用していないため
果たしてこれを複数使ってコーディングできるのか興味があります。

「PugとSassはバランスよく、効率良くスタイルを充てる」ことを意識して
あともうちょっとの学習期間を走りたいです。

この記事を書いた人