さまざまなシーンで役立つテクニック編
最後にさまざまなシーンで役立つテクニックをご紹介します。
略称との付き合い方
クラス名をつけるとき、名称が長いと単語を省略したくなりませんか？
しかしあまり無茶な略し方をすると、他の開発者に伝わらないことがあります。
たとえば、「.ttl」ーーこれが何の略か、わかりますか？
正解は「.title」の略です。以前僕がいた会社では皆が当たり前に使っていましたが、一般的ではなかったようでLIGでは伝わりませんでした。
ではそうすればいいのか。
解決策は3つあります。
1. 略語の原則禁止
僕がよく用いる方法は略語を禁止してしまうことです。
最もシンプルな方法です。
この方法は、名称が長くなるというデメリットがある代わりに、開発者個人が独自に名称を略して混乱を生むことを避けるメリットがあります。
また、クラス名が長くなることはクラス名のバッティングを下げ、コンポーネントの内容を推測する手助けすることにもつながるため、必ずしも悪いことばかりではないと僕は思っています。
しかしもし、プロジェクトメンバーに略語の禁止を反対された場合は、妥協案として「広く一般的に浸透している略称はOK」という例外を設けたりします。
広く一般的に、とは以下のようなものです。
- large size → l-size
- level → lv
- navigation → navi
ただしこの「広く一般的に浸透しているかどうか」という基準は境界線が曖昧なため、あまり推奨はできません。
2. 略語辞典の利用
また、略語をドキュメント化してまとめた「略語辞典」を活用する方法もあります。
これはMCSSという方法論で推奨されているやり方です。
| a | link ( tag) |
|---|---|
| ac | action |
| add | additional |
| aft | after |
| aux | auxillary |
| etc… | |
これを見ながらであれば、謎の略語に遭遇しても迷う心配はないでしょう。
ただ、略語辞典のドキュメントを見ながらコーディングを行うのは個人的にはわずらわしく感じるので、今現在僕は使っていません。
3. キャメルケースの採用
命名にチェインケースやスネークケースを用いている場合、単語の区切にハイフンやアンダーバーを使うことになるでしょう。
キャメルケースを採用すれば、単語の区切は大文字で表すため、一文字節約することができます。
わずかではありますが、クラス名を短くする手助けになります。
- .media-heading → .mediaHeading
まとめ
いかがだったでしょうか。
美しいCSSを書く上で、本記事が皆さんの参考になれば幸いです。
今回記事を書くにあたって参考にさせていただいた文献と記事を以下に記しますので、興味がある方はぜひそちらも一読ください。
それでは、また！
参考文献＆記事
-
SMACSS – Scalable and Modular Architecture for CSS
https://smacss.com/ja -
BEM – Block, Element, Modifier
https://bem.info/ -
SUIT CSS documentation
https://github.com/suitcss/suit/blob/master/doc/README.md -
MCSS – Multilayer CSS
http://operatino.github.io/MCSS/ja/ -
BEMによるフロントエンドの設計 | CodeGrid
https://app.codegrid.net/entry/bem-basic-1 -
Nesting Components | simurai.com
http://simurai.com/blog/2015/05/11/nesting-components/
LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。
