• 予測しやすい
• 再利用しやすい
• メンテナンスしやすい
• 拡張しやすい

CSS Architecture

Predictable CSS means your rules behave as you’d expect. When you add or update a rule, it shouldn’t affect parts of your site that you didn’t intend. On small sites that rarely change, this isn’t as important, but on large sites with tens or hundreds of pages, predictable CSS is a must.

CSS rules should be abstract and decoupled enough that you can build new components quickly from existing parts without having to recode patterns and problems you’ve already solved.

When new components and features need to be added, updated or rearranged on your site, doing so shouldn’t require refactoring existing CSS. Adding component X to the page shouldn’t break component Y by its mere presence.

As your site grows in size and complexity it usually requires more developers to maintain. Scalable CSS means it can be easily managed by a single person or a large engineering team. It also means your site’s CSS architecture is easily approachable without requiring an enormous learning curve. Just because you’re the only developer touching the CSS today doesn’t mean that will always be the case.

• Atomic Design
• BEM
• SMACCS

• Bootstrap
• Bulma
• emma.css

• Sass Documentation

• ress
• normalize.css
• HTML5 Reset Stylesheet

• bootstrap
• HUE/360
• 色彩センスのいらない配色講座
• ノンデザイナーズデザインブックを読み解く
• ズルいデザインテクニック
• https://terkel.jp/
• Onsen UI
• シンプルなRailsアプリケーションに一匙加えるちょい足しアニメーションレシピ

• gem
• npm
• alfred-font-awesome-workflow
  • Alfred

• FLEXBOX FROGGY

• CSS「display:grid;」便利すぎる！もう、Bootstrap不要？！

• rack-user_agent
• autoprefixer
• autoprefixer-rails
• Autoprefixer CSS online

• _breakpoints.scss

• breakpoints

• xs... 0 〜 575px

  • スマホ ポートレート

• sm... 576px 〜 767px

  • スマホ ランドスケープ

• md... 768px 〜 991px

  • タブレット ポートレート

• lg... 992px 〜 1199px

  • タブレット ランドスケープ

• xl... 1200px 〜 1399px

  • 小さいラップトップ

• xxl... 1400px 〜 ∞

  • PC

@include media-breakpoint-down(md) {
  // md 以下
  font-size: 3rem;
}
@include media-breakpoint-up(md) {
  // md 以上
  font-size: 3rem;
}
@include media-breakpoint-only(md) {
  // md のみ
  font-size: 3rem;
}