2016/9/15更新

海外の人気サービスで使われているCSSスタイルガイド８選

UX MILK編集部

モノづくりのヒントになるような記事をお届けします。

CSSのスタイルガイドとは、コーディングを行う際の決まりやルールのようなものです。

CSSのスタイルガイドを作成することで、一貫性のあるスタイルシートを実現しやすくなり保守性や拡張性を向上させることができます。ひとりで開発するときにも役立ちますが、特にチームで開発を進めるときに効果を発揮します。

今回は参考になる海外の有名サービスのCSSスタイルガイドをまとめてみました。CSSスタイルガイドを作成するときや、コーディングをするときにぜひ活用してみてください。

Airbnb

AirbnbのCSS/Sassのスタイルガイドです。各用語のルールから始まりCSSやSassの合理的な記述方法について記載されています。こちらは日本語訳されたスタイルガイドもあります。

GoogleのHTML/CSSのスタイルガイドです。シンプルなデザインのスタイルガイドになっており、コーディングするときにぜひ参考にしたいガイドです。

DropboxのCSSスタイルガイドです。こちらはSCSSに対応して記述されています。コーディングをする際の禁止事項、インデント数、プロパティの記述順序などが詳細に決められています。

FoursquareのHTML/CSSのスタイルガイドです。こちらはHTML/CSSだけでなく、フォームやボタンなど各コンポーネントのルールについても記述されています。

TrelloのCSSスタイルガイドです。こちらはプリプロセッサとしてLESSを使用していますが、可読性を担保するために最低限の機能しか使用していません。

WordPressのCSSスタイルガイドです。WordPressはHTMLとPHPのコーディングガイドもあり、そちらも参考になります。特にWordPressのテーマやプラグインのリリースを考えている方は必読です。

GitHubはPrimerというCSSフレームワークを使用しており、そのHTML/SCSSスタイルガイドです。HTMLやSCSSの記述フォーマットだけでなく、ファイル構造なども記述されています。

UdemyのCSSスタイルガイドです。UdemyはBootstrapをCSSフレームワークとして使っており、Bootstrapに沿ったCSS/HTMLの記述方法のベストプラクティスが掲載されています。

今回は有名サービスのCSSスタイルガイドを紹介しましたが、上で紹介した以外にも有名なスタイルガイドとして以下のようなものがあります。

これらのスタイルガイドも非常に参考になります。一貫性のある可読性の高いコードを書けるように、今回紹介したスタイルガイドをぜひ活用してみてください。

CSS HTML WordPress