柴犬でもわかるFLOCSS

2018年12月10日 著

[ 2018-12-10 追記 ] 当初、「柴犬」を誤って「芝犬」と表記していました。大変失礼しました、またご指摘ありがとうございました。

『柴犬でもわかるFLOCSS』は、同僚にお願いして技術書典5で買ってきていただいた書籍。FLOCSSの存在については以前から知ってはいたので、考案者である谷氏ご自身の著書でしっかり理解を深めようと思って購入。基本的にFLOCSSは良い思想だなと思いましたが、谷氏もあまり多用されるべきレイヤーではないと記されているように、Utilityレイヤーに含めるコード量は運用を通じ常に最小化を意識し続ける必要がある、と思っています。また、p.43に出てくる

<!-- 余白 -->
<div class="l-spacer-md"></div>

みたいなマークアップ、自分は基本やらないですね。谷氏もdiv がセマンティクス的に意味を持たないとはいえ、少し違和感を感じるようなマークアップかもしれませんと書いてはいますが、少しどころか大いに違和感を覚えるので。加えて自分はBEMに基づく命名が好きではないので、それ以外の大まかな構成なんかが参考になると思いました。特に

FLOCSSでは、 CSS (CascadingStyle-Sheet) らしくカスケーディングをあえて許容しており、FLOCSSで定義しているレイヤーの関係性を厳密にすることで、安全にカスケーディングされるよう設計しています。

ここが割とポイントかなと思ったり。だいぶ昔から業界的に詳細度を上げるのは良くないだの、IDセレクタは使うなだのと喧伝されているように感じていて、それはそれで一理あるのですけど、よほど大規模なスタイルシートを多人数で、かつ同時並行で編集などしない限り、そこまで忌避するものでもなかろうと思ってるんですよね。FLOCSSでは、カスケーディングという言わばCSSの最たる利点を是とされている点で好印象。以下、誤記っぽいところ：

• p.19の「このような実装は避けるほうが懸命です。」の「懸命」は「賢明」の誤記と思われます。
• p.22の「@import "object/project/**" の ように参照すれば、」のところ、アスタリスクが一つ余分に多いと思います。
• p.36のコード3.2、冒頭に余分な半角スペースが存在しているようです。