はてなブックマーク

FLOCSSの導入事例の共有 2017年の6月にリニューアルした転職ナビ、 最も大変だった事の一つはFLOCSSの導入でした。 FLOCSSは 命名規則にMindBEMdingを採用 ファイル・ディレクトリ構成を定義 カスケーディングと詳細度の管理方法にも言及 という特徴をもった、CSS設計指針です。 FLOCSSのドキュメントは世に数有るけれども導入事例や知見がもう少し欲しかったなと。 こちらの記事では転職ナビがFLOCSSを導入した時のお話をさせていただきます。 そもそも「CSS設計ってなんやねん」って方は、手前味噌ではございますが、よろしければこちらの記事をどうぞ。 CSS設計を勉強するならまずこれを見たら良いかも CSS設計で解決したかった課題 そもそも転職ナビのCSS設計を再定義することで解決したかった課題は２つあります。 オレオレになりがちな命名規則 プレフィックス

HTMLを覚えて3周年経ちました、@sueshinです。 3周年とか枕詞に使っている時点でお分かりかと思いますがチキン野郎です。はい。 お手柔らかにお願いしますmm 私が担当するジョブセンスリンクは9年程たった歴史のあるWEBサイトです。 トップページで使用されているCSSセレクタの数は約3000で、行数でいうと軽く10000行は超えていると思います。 そんな、あふれんばかりのレガシーコードに愛憎の念が入り混じっている今日この頃です。 現在私は師走ということで、来年に向けてCSSの整理をしないとと思い、CSS設計を勉強しています。 ただ、情報の多くはWEBに上がっている一方で、何から手をつけたら良いか初めはわからなかったので、 見渡してCSS設計を学習できるようにざっくりまとめて見ました。 CSS設計のゴール 何事もゴールを決めないことには走れないですよね。 「CSS Architectu