ABOUT

コーディングルール

Web制作において最も重要なのは『保守性の高さ』だと思っています。
第三者が初めて見てもすぐにわかるよう、クラス名やフォルダの管理を徹底しております。
ここではそんな私のコーディングルールをお伝えしようと思います。

HTMLでは、適切なHTMLタグを使いセマンティックなマークアップを心掛けています。
適切なタグの使用はSEO対策になることはもちろんのこと、自分自身の作業のしやすさ、そして高い保守性に繋がります。

CSSでは、SCSSを使い可読性を最優先させています。
FLOCSSとBEMのわかりやすい部分を採用し、オリジナル要素を加えて管理しています。
BEM本来の　Block__Element--Modifier　での命名では、他者に自分の意図を伝えるのが難しく感じたからです。
(自分自身、他者のBEMでの命名を見ると少し考えてしまうことがあります)

その為、このABOUTページのこの文章であれば、『ABOUTページ』の『ルール(セクション名)』の『文章』とし、 『　.about__rule__text　』と命名しています。 アンダースコアで繋げた理由は、ダブルクリックでクラス名を全選択できる為です。

FLOCSSでのファイル構成も、第三者が見た時のわかりにくさを排除する為、なるべくページ単位で完結できるよう構成しています。
共通のパーツがあってもmixinを多用しすぎると、他のフォルダやファイルを行き来しなければなりません。 なるべくページ単位で管理することで、1つのSCSSファイルを見れば済むようにしています。 (アニメーションやボタンなどのパーツは別ファイルですが、その際はどのページのどのクラスのアニメーションかコメントをつけています)

このようにオリジナルのルールを設け、保守性の高さを確立しています。
これにより他者へのわかりやすさはもちろんのこと、自分自身の作業の効率化・迷いの排除、そして決まった納期までの納品を遵守いたします。