CSSコーディングのシンプルなコツ5選【より良いコーディングのために】

CSSはいかなるウェブ開発プロジェクトにおいてももっとも重要な側面の１つです。

「カスケーディング・スタイル・シート」は色やレイアウト、フォントを含めたウェブページを提示し、ページが異なるデバイスに適応可能にする役割を果たしています。特に後日変更が必要となるプロジェクトやチーム内で働く際には、構造化されて読みやすく拡張性のあるコードを書くことは重要です。

より良いCSSコーディングのためのシンプルなヒントをいくつか発見しているので、次回のウェブ開発プロジェクトにおいて改善を加え、時間を節約する方法をここで見つけることができるでしょう。

 

 

 

#1 ベクターアセットを使用しましょう

ウェブページ内でアイコン・フォントとSVGアセットを使用することで、「@1x」や「@2x」、「@3x」などの複数のグラフィックサイズをエクスポートするために費やす時間をかなり節約することができます。また、それぞれのアセットを表示するためのコードの数も減らします。画像解像度が増加し続けるにつれ、ベクターアセットを使用することによってコードをクリーンかつ管理しやすく、アセット数を最小限にする一方で、ウェブページは将来のために構築されます。

 

ベクターアセットには他のものでは代わりがきかない多くの利益があります。まず、ファイルの大きさが典型的にとても小さいので、ローディング時間が迅速です。次に、グラフィック・アプリケーションを再訪する必要なしにコード内でアセットの大きさを変更することが素早く簡単にできます。最後に、CSSコード自体でアイコン・フォントやSVGアセットの色を簡単に編集できるので、時間と労力どちらも節約することが可能です。

 

 

 

#2 CSSが十分なブラウザサポートを受けていることを確実にしましょう

「クローム」や「サファリ」、「ファイヤーフォックス」などの最新バージョンを使うことに慣れ、未だに「インターネット・エクスプローラー」のような旧式のブラウザを使用している人々がいることを忘れてしまうのは簡単です。特に大規模な職場では、しばしばブラウザは他の環境内で更新されていないため、正しく表示されるか確かめるためにブラウザの範囲内でCSSをテストすることが重要です。

このプロセスに役立つ便利なツールはたくさんあります。まず、その中の１つである「ブラウザ・ショット」は異なるブラウザの広範囲において、ウェブサイトのスクリーンショットを見ることを可能にし、手動でインストールする手間を省いてくれます。もう１つの優れたツールである「オート・プレフィクサー」を使うと、はっきりとしたシンプルなコードを書き続けることができ、その後プレフィックスを適用することができます。

 

これがその例です：

 

 

オート・プレフィクサーを使用すると、これは以下のように変換されます：

 

最近のブラウザ人気や適切なサポートに基づいた最新の関連プレフィックスを適用する一方で、コードが極端に長く複雑になるのを防ぎます。

 

 

 

#3 CSSを使ってたくさんコメントしましょう

あなたは優れたものも含めて、CSSコメントをめったに使うことがないかもしれません。CSSコメントは「/*」や「*/」に囲まれており、ウェブページをつくる時にブラウザに無視されます。ここに例があります：

 

 

コメントはコードのこのセクションが必要である理由を説明しているので、同僚やユーザーが正確に理解するために役立っています。

このように、コメントがコードのセクションに適用されるほど、ファイル上で作業する人々にとって理解することがたやすくなります。あなた自身にとってもコードのセクションに追加する理由を覚えておくと、特に長い時間を経て戻ってきた時に役立ちます。

より良く体系化され、組織化されたCSSファイルを維持するためにコードのセクションを切り離す時には、CSSコメントは非常に便利です。

 

 

これがその例です:

 

 

CSSファイルを通したコメントを含めることで、素早く簡単に見つけられるように、そして混乱しないためにゆったりと間隔が開けられたセクション内で、コードを切り離すことができます。これは優れた形式で、編集のためにCSSファイルに戻る必要がある時に多くの時間を節約してくれるでしょう。

 

 

 

#4「Sass」のようなCSSプレプロセッサーを使用しましょう

これはおそらく私が推奨する一番重要なヒントになります。「Sass」はCSSプレプロセッサーのことで、１つの言語でコードを書くことを基本的に意味し、その後CSSに変換されます。

 

「CSSは興味深いものですが、スタイルシートはより大きく複雑で、維持するのが難しいものです。この部分でプレプロセッサーは役立ちます。Sassは変数やネスティング、ミックスイン、インヘリタンスなどCSSを書くことを再び楽しませてくれるニフティ関連のものをあなたに使わせようとします。」

 

つまり、「Sass」によって使用するコード数が減り、素早く簡単にコードを編集することができます。ネスティングのような、このことを可能にした驚くべき便利な特徴が含まれています：

 

 

そして「Extend」によってこれを実行することができます：
 

 

これらは「Sass」に含まれる革新的な特徴のほんの一部にすぎません。セットアップするのはとても簡単で時間もかからず、コードはおそらくCSSそのものよりも直観的で論理的ですらあります。

 

 

 

#5フレームワークやグリッドテンプレートを使用しましょう

フレームワークを使えば、とてつもない量の時間の節約になります。

それぞれのプロジェクトを始めるために同様のコードのベースを使用することによって、ウェブサイトが信頼できるもので、しっかりと構造化されており、親しみやすいものであるかを確認することができます。フレームワークには「ブーツストラップ」や「ファウンデーション」を含めた多くのものがあります。これらの特定のフレームワークは非常に豊富な機能を持ち、小規模なプロジェクトにとって、ロード時間を減らしコードを編集しやすいコードを使用することは重要です。

個人的に、私は敏感かつ軽量でシンプルな「ザック・コール」による「シンプル・グリッド」のようなものを好みます。これまでに述べたようにフレームワークは時々シンプルなプロジェクトにとって幾分過剰すぎることがあるため、開発プロジェクトを始めるためには使用するテンプレートに慣れておくことを推奨します。

 

 

 

 

次回ウェブ開発プロジェクトを始める時には、より良いCSSコーディングのためにできるこれら多くのシンプルなヒントを実践してみてください。コードの編集が簡単で手早くできるようになり、将来的にかなりの時間の節約になります!

 

 

 

 

※本記事は、5 simple tips for better CSS codingを翻訳・再構成したものです。