CSSでの開発を効率的にスピードアップするワザ7選【ワークフローの改善に役立つ】

ワークフローの改善を図るのは、プロの開発者として必須です。その改善策のひとつに挙げられるのが、CSSの記述をより少なくすることです。これだけで業務時間が短縮できるだけでなく、ページのロード時間短縮や、将来の変更が行いやすくなる効果までついてきます。
 
今回は、CSS開発のスピードアップにつながる7つのポイントを紹介します。
 
 

1.CSSプリプロセッサーを使う

Sassのようなプリプロセッサーを使えば、現在のCSSでは利用できない機能まで使うことができます。変数やネスト化、継承など、コードの量を減らして効率よく開発できます。
 
 
 

2.ショートハンドを使う

ショートハンドを使ってコーディングすれば、同じCSSをより素早く生成できます。余白の指定などでよく使われています。
 
 
このように分けて書いてもいいですが、ショートハンドなら1行にまとめられます。
 
 
 
 
 

3.複雑なプロジェクトにはフレームワークを使う

中規模・大規模なプロジェクトではフレームワークが活躍します。たとえばBootstrapはSassと統合され、レスポンシブ対応のグリッドシステムを備えています。CSSの生成に必要な繰り返しのタスク

リンク元