FLOCSSのCSS設計手法を取り入れました

サイト共通のCSSとトップページのCSSにFLOCSSの設計手法を取り入れました。 ルールが明確になり、CSSの分かりやすさが向上したように感じます。

構造

小規模なサイトのため、scssファイルを細かく分けず、header、main、footerといったエリアごとのファイルに分けています。


        /common/
            /css/
                foundation.scss
                layout.scss
                object.scss
                /foundation/
                    _reset.scss
                    _base.scss
                /layout/
                    _header.scss
                    _main.scss
                    _footer.scss
                /object/
                    /component/
                        _header.scss
                        _main.scss
                        _footer.scss
                        _container.scss
                        index.scss
                    /utility/
                        index.scss

参考サイト

検証環境

Desctop

Mac
chrome 111.0.5563.146
○

safari 16.4
–

Windows
chrome 111.0.5563.147
–

Edge 111.0.1661.62
–

Mobile

iPad
Safari 604.1
–

iPhone
Safari 604.1
–

Chrome 111.0.5563.101
–

Android
Chrome 81.0.4044.138
–