RailsエンジニアのためのCSS設計の解説動画

みなさんは、CSSを記述するときに管理のしやすさを意識することができていますか？

Railsのようなサーバーサイドでの設計手法・コーディング規約がある会社は多く存在しますが、CSSは軽視されてしまう傾向があります。しかしCSSを軽んじると、次のような問題が起こります。

・どのファイルを変更すれば良いか分からなくなる
・意図しない副作用で見た目が崩れる
・重複した無駄なスタイルを増やしてしまう

このような問題から「作業効率」や「安全性」などを向上するために生み出されたものがCSS設計です。Webアプリケーションを作成する場合に、このCSS設計を取り入れないと確実に負債はたまります。

しかし、CSS設計方法はたくさんあるので「どれを選んだら良いか分からない」という方が多いかと思います。そんな方のために、今回はRailsアプリケーションによく取り入れられる「FLOCSS・BEM・SCSS」を組み合わせたCSS設計方法を解説させていただきます。

・FLOCSS - CSSを各レイヤーで構成したCSS設計方法
・BEM - 「Block・Element・Modifier」の概念と厳格なクラス名の命名規則
・SCSS(Sass) - CSSのスタイルシート言語の機能を拡張した言語

「CSS設計って難しそう、理解できるか不安」という方も安心してください。文章の解説だけではなく、イメージを結びつけて理解を深められるように動画でも解説させていただきます。以下は動画のサンプルです。

Railsエンジニアを目指している方、もしくは新米Railsエンジニアの方は知っておいて損のない内容となっています。興味のある方はぜひ挑戦してみてください。