ウェブサイトのルックアンドフィール（またはスタイル）は、CSS（Cascading Style Sheets）によって決定されます。 これは、ウェブサイトのディレクトリに追加するファイルで、ページのビジュアルデザインとレイアウトを作成するさまざまなCSSルールが含まれています。
サイトは複数のスタイルシートを使用することができますが、そうする必要はありません。 すべてのCSSルールを1つのファイルに配置することができます。複数のファイルを取得する必要がないため、ページの読み込み時間とパフォーマンスが向上するなど、実際には利点があります。 非常に大規模なエンタープライズサイトは時々別のスタイルシートを必要とすることがありますが、小規模から中規模の多くのサイトでは1つのファイルで完璧に細かい動作が可能です。 これは、私のウェブデザイン作業の大半に使用しているものです。つまり、ページに必要なすべてのルールを含む単一のCSSファイルです。 だから問題は今になります - あなたはこのCSSファイルの名前をつけるべきですか？
命名規則の基本
Webページ用の外部スタイルシートを作成する場合は、HTMLファイルと同様の命名規則に従いファイル名を指定する必要があります。
特殊文字を使用しない
CSSファイル名には、az、数字0-9、アンダースコア（_）、ハイフン（ - ）の文字のみを使用してください。 ファイルシステムでは、他の文字を含むファイルを作成することができますが、サーバーOSには特殊文字に関する問題がある可能性があります。 あなたはここで言及された文字だけを使ってより安全です。 結局のところ、サーバーが特殊文字を許可していても、将来ホスティングプロバイダを移管することに決めた場合はそうではないかもしれません。
任意のスペースを使用しない
特殊文字と同様に、スペースはWebサーバーに問題を引き起こす可能性があります。 あなたのファイル名でそれらを避けるのは良い考えです。 私は、Webサイトにそれらを追加する必要がある場合に備えて、これらの同じ規則を使用してPDFのようなファイルに名前を付けることもポイントにします。 ファイル名を読みやすくするためのスペースが必要と思われる場合は、代わりにハイフンまたはアンダースコアを使用してください。 たとえば、 "this is the file.pdf"を使用する代わりに、 "this-is-the-file.pdf"を使用します。
ファイル名は文字で始める必要があります
これは絶対的な要件ではありませんが、一部のシステムでは文字で始まらないファイル名に問題があります。 たとえば、数字文字でファイルを開始すると、問題が発生する可能性があります。
すべての小文字を使用
これはファイル名には必須ではありませんが、一部のWebサーバーでは大文字と小文字が区別されるため、別のケースでファイルを忘れて参照すると読み込まれません。 私自身の仕事では、すべてのファイル名に小文字を使用します。 私は実際にこれが多くの新しいウェブデザイナーが覚えなければならない苦労しているものであることを発見しました。 ファイルに名前を付けるときのデフォルトアクションは、名前の最初の文字を大文字にすることです。 これを避け、小文字の習慣に入るだけです。
可能な限りファイル名を短くしてください
ほとんどのオペレーティングシステムではファイル名のサイズに制限がありますが、CSSファイル名の場合よりもはるかに長くなります。 拡張子を含まないファイル名については、20文字を超えないようにしてください。 現実的には、それよりもずっと長いものは、とにかく作業してリンクするのが面倒です！
あなたのCSSファイル名の最も重要な部分
CSSファイル名の最も重要な部分は、ファイル名自体ではなく、拡張子です。 MacintoshとLinuxシステムでは拡張機能は必要ありませんが、CSSファイルを作成する際には拡張機能を含めることをお勧めします。 そうすれば、スタイルシートであり、将来何があるかを判断するためにファイルを開く必要がないことが常にわかります。
おそらく大きな驚きではありませんが、CSSファイルの拡張子は次のとおりです。
.cssCSSファイル命名規則
サイトにCSSファイルが1つしかない場合は、好きなように名前を付けることができます。 私はどちらかを好む：
styles.cssまたはdefault.css私が扱っているサイトのほとんどには単一のCSSファイルが含まれているので、これらの名前は私にとってはうまく機能します。
あなたのウェブサイトが複数のCSSファイルを使用する場合は、各ファイルの目的が明確であるように、機能の後にスタイルシートの名前を付けます。 Webページには複数のスタイルシートが添付されているため、そのシートの機能とそのスタイルに応じて、スタイルを異なるシートに分割することができます。 例えば：
- レイアウトとデザインとの比較layout.css design.css
- ページセクション main.css nav.css
- サブセクション mainstyles.css subpage.cssを含むサイト全体
あなたのウェブサイトがある種のフレームワークを使用している場合、ページの異なる部分やサイトの側面（タイポグラフィ、色、レイアウトなど）にそれぞれ専用の複数のCSSファイルが使用されていることに気づくでしょう。
Jennifer Kryninのオリジナル記事。 ジェレミージラール編集：9/5/17