ここ最近結構cssを弄っていたけど、その時に見つけたBasscssというcss Frameworkが良さそうだった。
BasscssはOOCSSの原理に則り設計されている。
特徴としては、依存度の小さいImuutableなutility moduleを備えている。
依存性が低いので、副作用が少なくなる。
また軽量であり、postCSSを使っているおり、必要なmoduleのみをビルドできる。
マルチクラスでの実装
Documentにある通りなのだが、マルチクラスで実装している。
以下のような感じ(Page Layoutより)
| <section class="container px2 py3"> | |
| <div class="clearfix mxn2"> | |
| <div class="sm-col sm-col-4 px2"> | |
| <h2 class="h1 mb0">Bacon</h2> | |
| <p>Bacon ipsum dolor sit amet chuck prosciutto landjaeger ham hock filet mignon shoulder hamburger pig venison. Ham bacon corned beef, sausage kielbasa flank tongue pig drumstick capicola swine short loin ham hock kevin.</p> | |
| </div> | |
| <div class="sm-col sm-col-4 px2"> | |
| <h2 class="h1 mb0">Bratwurst</h2> | |
| <p>Bacon ipsum dolor sit amet chuck prosciutto landjaeger ham hock filet mignon shoulder hamburger pig venison. Ham bacon corned beef, sausage kielbasa flank tongue pig drumstick capicola swine short loin ham hock kevin.</p> | |
| </div> | |
| <div class="sm-col sm-col-4 px2"> | |
| <h2 class="h1 mb0">Andouille</h2> | |
| <p>Bacon ipsum dolor sit amet chuck prosciutto landjaeger ham hock filet mignon shoulder hamburger pig venison. Ham bacon corned beef, sausage kielbasa flank tongue pig drumstick capicola swine short loin ham hock kevin.</p> | |
| </div> | |
| </div> | |
| </section> |
基本的な機能をImuutableなmoduleで実装していくことで、変更に対しても柔軟に対応できる。
また、Imuutableなmoduleはシンプルな設計なのでコードの可読性が確保できる。
HTML側が複雑になるという懸念もあるが、シングルクラス設計に比べHTML側である程度スタイルが予想できる点では、メリットになるのではないかなと思う。
依存度が低い
stats にあるように、依存度が低いことがこのFrameworkの特徴。
CSSはシングルクラスで設計する場合、どうしても依存性が高くなり、副作用が発生してくる。
マルチクラス設計にしてしまうことで、この問題を回避している。
サービス運用していくうちに、ネーミングルールと継承のあたりで、CSSは破綻の方に向かっていきがちなので、
依存度の低いFrameworkを使用して、基本設計を行うことで解決できるではないかと思う。
principlesにあるように、Basscssでは、短くシンプルな命名規則を用い、コンテンツに由来するコンポーネントの再利用を避けること。基本的なコンポーネントの構造はテーマから分離することなど、設計の原則もはっきりしている。
自分でもCSSの設計は色々な手法を試してみたが、マルチクラスでImuutableなmoduleを使うことに落ち着いた。
Basscssは自分が実務で取り入れた考え方なり、実装方法と似た感じだった。
Basscssのような依存度の低いImuutableなmoduleをうまく使ってマルチクラスで実装し、運用していく手法を選択するか、
厳密なネーミングルールのもとシングルクラスで実装し、運用フェーズでCSSが破綻する前にコンポーネントそのものを作り直していく手法のどちらかが今の所いいのかなと思っている。