CSS Architecture

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

CSS Architecture

Predictable

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.

Reusable

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.

Maintainable

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.

Scalable

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

CSSフレームワーク他

• Bootstrap
• Bulma
• emma.css

sass

• Sass Documentation

reset.css

• ress
• normalize.css
• HTML5 Reset Stylesheet

デザイン参考

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

fontawesome

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

display: flex

• FLEXBOX FROGGY

display: grid

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

IEなど各ブラウザ対応

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

break points

bootstrap

• _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;
}