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

UX MILK編集部

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

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

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

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

Airbnb

airbnb-style-guide

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

Airbnb Style Guide

Google

google-sytle-guide

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

Google HTML/CSS Style Guide

Dropbox

dropbox-sytle-guide

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

Dropbox (S)CSS Style Guide

Foursquare

foursquare-sytle-guide

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

Foursquare HTML/CSS Style Guide

Trello

trello-sytle-guide

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

Trello CSS Guide

WordPress

wordpress-sytle-guide


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

CSS:WordPress CSS Cording Standards
HTML:WordPress HTML Cording Standards
PHP:WordPress PHP Cording Standards

GitHub

github-sytle-guide

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

Styleguide · GitHub

Udemy

udemy-sytle-guide

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

Udemy Styleguide · CSS

まとめ

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

CSS Guidelines
Code Guide by @mdo
idiomatic-css

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


イベント

2017/12/05(火)
Design Thinking Square