2018.04.05【TRUNK Style Guide】CSSコーディング規約をつくりました!

74

こんにちは、TRUNKでフロントエンドエンジニアをしている、せんごくです。
主に見た目の部分などを作ったりしています。

さっそく本題に入りますが...

 

この度、TRUNK開発チームHHHは

TRUNK Style Guide

を作成/公開しました!

 

HTML/CSSを学び始めた方や、もう知ってるぞ!という方も1度チェックしてみてはいかがでしょうか。

なぜ作ったのか


これまで様々なインターン生がTRUNKの開発に携わってきました。
しかし、開発環境内での決まったルールというルールがなく、暗黙の了解でマークアップしてきました。

そのため独自の思想や書き方が混在し気がつけば、誰も手をつけられない地獄の様な状態に...

それらを改善するために今回「厳密な規約」を作成しました。

また、全員の意識を統一することでTRUNKに対してより良いプロダクトを提供できる → TRUNKの品質が上がり、会社としてのブランディング向上にもつながると考えました。

何をするものなのか


「規約」なので、その言葉通り「〇〇はしても良い/ダメ」を決めてコードを書いていくものです。

例えば...

sample
とか

guide_sample_02
とか

「これだけ見てもなんだ?」

という感じですが、これら1つ1つの積み重ねと共通意識がコードの品質を保つことにつながります。

ちなみに、TRUNK Style Guideは
GoogleAirbnbのstyleguideに則って作成しています。

Googleスタイルガイド - Google HTML/CSS Style Guide
Airbnbスタイルガイド - Airbnb CSS / Sass Styleguide

さいごに


このTRUNK Style Guideは全世界に公開しています。

まだまだ詰める箇所が多くありますが、エンジニアの方で

「ここちょっとおかしくない? / ここってどうなの?」

など意見がありましたら、
是非プルリクエストをお送りください!

TRUNK Style Guide

この記事を書いた人

SengokuKizuku

フロントエンドを目指しているマークアッパー。 現在TRUNKでインターンしています。