初心者が陥りやすいSSの間違い

CSS は見た目ほど単純ではなく、開発者は頻繁にいくつかの間違いを犯し、何をすべきか苦慮することになります。 CSS は、ほとんどの開発者が CSS を作成しようとするときに妨げられるこれらのよくある間違いのため、直感的でなく扱いにくい言語として認識されています。その結果、ほとんどの開発者は、独自の CSS を作成することを避けるために、Bootstrap や Tailwind CSS などの CSS フレームワークを使用することを選択します。

このブログでは、開発者がよく犯す 5 つの一般的な間違いについて説明します。これらの間違いを認識して回避すると、次のような CSS を作成するのに役立ちます。

• ラップトップだけでなく、さまざまなデバイスで動作します
• 初めて試してみるとうまくいきます
• CSS に対するイライラが軽減されます

早速見てみましょう。

間違い 1: CSS リセットを使用しない

これは私にとって驚くべき発見の 1 つであり、今まで CSS を間違って実行してきたことに初めて気づきました。ブラウザには、スタイルシートが存在しない場合のフォールバックとして機能するデフォルトのスタイルがあります。ただし、これらのデフォルトのスタイルはブラウザごとに異なります。いずれの場合でも、2 つのブラウザーが同じデフォルトのスタイルを提供することはほとんどないため、スタイルが有効であることを確認する唯一の実際の方法は、CSS のリセットを使用することです。

CSS のリセットでは、すべての HTML 要素のすべてのスタイルを予測可能なベースライン値にリセット (またはむしろ設定) する必要があります。この利点は、CSS リセットを効果的に組み込むと、最初からすべて同じであるかのように、ページ上のすべての要素のスタイルを設定できることです。

CSS リセットは、さまざまなブラウザー間で一貫したスタイルを維持するのに役立つ白紙の状態です。ほとんどの場合、これには margin:0 と padding:0 の設定が必要ですが、他の要素をリセットする必要があります。
リセット コードのサンプルは次のとおりです:

* {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-weight: inherit;
  font-style: inherit;
  font-size: 100%;
  font-family: inherit;
  vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
  outline: 0;
}
body {
  line-height: 1;
  color: black;
  background: white;
}
ol,
ul {
  list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
  border-collapse: separate;
  border-spacing: 0;
}
caption,
th,
td {
  text-align: left;
  font-weight: normal;
}
blockquote::before,
blockquote::after,
q::before,
q::after {
  content: "";
}
blockquote,
q {
  quotes: "" "";
}

間違い 2: ピクセル単位の使用

私は、フォント サイズ、マージン、パディング、高さまたは重みの属性に px 単位を使用することにも罪を犯しています。場合によっては px 単位を使用しても問題ありませんが、それに依存しすぎるとアクセシビリティの問題が発生します。

MDN によると、一部のブラウザではユーザーがフォント サイズを変更できないため、フォント サイズをピクセルで定義することはできません。たとえば、視覚に制限のあるユーザーは、Web デザイナーが選択したサイズよりもはるかに大きなフォント サイズを設定したい場合があります。包括的なデザインを作成したい場合は、フォント サイズにこれらを使用しないでください。

ただし、ユーザーがブラウザのデフォルトのフォント サイズを大きくすると、コンテンツがオーバーフローする可能性があるため、ピクセル単位はコンテンツの高さと幅の設定にも適していません。メディア内クエリで px 単位を使用すると、ユーザーがズームインしたりデフォルトのフォント サイズを変更したりするときのレイアウトにも影響します。 

?間違い

p {
  font-size: 16px;
 /*this prevents users from resizing the font-size*/
  line-height: 20px;
  margin-bottom: 8px;
}

✅ 正解

body {
  font-size: 16px;
}
p {
  font-size: 1rem;
  line-height: 1.25;
  margin-bottom: 0.5em;
}

間違い 3: ID をセレクターとして使用する

Web 開発で最も見落とされている問題の 1 つは、特殊すぎてオーバーライドが難しい過剰修飾セレクターの使用です。 ID セレクターは CSS でより具体的です。つまり、ID セレクターをオーバーライドしたり、別のコンポーネントでスタイルを再利用したりすることはできません。

CSS セレクターは、動作するために必要な最小限の具体性で常に作成してください。余分な綿毛をすべて含めると、より安全で正確に見えるかもしれませんが、CSS セレクターに関しては、具体性のレベルは 2 つのレベルしかありません。具体的と十分に具体的ではありません。

?間違い

#header {
  font-size: 1em;
  line-height: normal;
}

✅ 正解

.header {
  font-size: 1em;
  line-height: normal;
}

一般に、CSS では過度に特殊なセレクターの使用は避けるべきです。 CSS 特異性トーナメントは、強力すぎるセレクターを使用することがなぜ悪い考えであるかを示しています。トーナメントでセレクターが非常に強力な場合、セレクターは早い段階ですぐに勝利します。つまり、セレクターに勝つ唯一の方法は、さらに強力なセレクターを作成することです。

特異性が常にエスカレートするこの傾向は、特異性戦争として知られています。核兵器の備蓄と同様、この戦争でも誰も勝者はいません。具体性が高まるにつれて、事態の沈静化はますます困難になるだけです。本格的な特異性戦争を回避する最善の方法は、そもそも高度に特異性の高いセレクターを使用しないことです。

間違い-4: 名前付きの色

調査中に私が発見したもう 1 つの間違いは、名前付きの色の問題です。開発者は、特定の色として認識されている色がブラウザによって大きく異なって見えることを無視することがよくあります。

次のように言う: 色: 赤; 本質的には、ブラウザが赤と判断したものを表示する必要があると言っているのです。すべてのブラウザーで正しく機能させることから何かを学んだとしたら、それは、Web ページの表示方法をブラウザーに決定させてはいけないということです。

Instead, you should go to the effort to find the actual hex value for the color you’re trying to use. That way, you can make sure it’s the same color displayed across all browsers. You can use a color cheat sheet that provides a preview and the hex value of a color.

? Mistake

.header {
  font-size: 1em;
  line-height: normal;
  color: red;
}

✅ Correct

.header {
  font-size: 1em;
  line-height: normal;
  color: rgb(255, 0, 0);
}

Mistake 5: Not Using Shorthand Properties

As a developer, one rule is to never repeat yourself. Therefore, you should find ways to minimize the number of lines of code that you write.

One common problem with CSS is understanding shorthand properties for things like margin, padding and inset. As a confession, I also struggle with this problem and often have to look to the documentation on whether margin: 0 5px sets the margin in top-bottom or left-right.

? Mistake

.my-cool-div {
  margin-top: 50px;
  margin-right: 0;
  margin-bottom: 50px;
  margin-left: 0;
  background-image: url(background.png);
  background-repeat: repeat-y;
  background-position: center top;
}

✅ Correct

.my-cool-div {
  margin: 50px 0;
  background: url(background.png) repeat-y center top;
}

Using shorthand CSS improves efficiency and makes it easier to maintain our code. However, this could take time to master and I recommend checking the documentation.

Mistake 6: Overreliance on Position Absolute

Position absolute is that one band-aid solution that can cause more problems as it breaks the document flow. When using positions absolute, MDN recommends that you ensure that elements that are positioned with an absolute or fixed value do not obscure other content when the page is zoomed to increase text size.

Position absolute should be the last choice since it has some effects such as pulling the element out of the flow and making it stack over other things. 

Furthermore, elements positioned absolutely don't naturally adapt to changes in screen size or parent element dimensions, which can break the layout on different devices.

? Mistake

.sidebar {
  position: absolute;
  top: 50px;
  right: 0;
  width: 30%;
  background-color: #e0e0e0;
  padding: 20px;
}

✅ Correct

.sidebar {
  transform: translateY(50px) translateX(0);
  /* Moves the element down by 50px */
  width: 30%;
  background-color: #e0e0e0;
  padding: 20px;
}

In this example, we see that we can achieve the same functionality without breaking the document flow by using transform to move the sidebar down by 50px.

Mistake 7: Collapsing Margins

Collapsing margins can be really hard to understand and frustrating to decode since you might not understand why your applied margin or padding is not working as expected.

The top and bottom margins of blocks are sometimes combined (collapsed) into a single margin whose size is the largest of the individual margins (or just one of them if they are equal), a behavior known as margin collapsing. Note that the margins of floating and absolutely positioned elements never collapse.

Understanding margin collapse is essential for achieving consistent spacing in your layouts, particularly in scenarios where you want to ensure a specific amount of space between elements.

One solution to collapsing margins is using padding, especially for child elements rather than margins. It is generally advised not to add margin to the child element, especially in JavaScript frameworks such as react since this might affect their reusability.

You must always remember that adding a margin to a child element can affect the position of the parent element as the margins collapse.

? Mistake

/* html */
/* 
<div class="element1">Element 1</div>
<div class="element2">Element 2</div> 
*/
.element1 {
  margin-bottom: 20px;
}
.element2 {
  margin-top: 30px;
}
/* the total margin will be 30px rather than 50px */

✅ Correct

.element1 {
  margin-bottom: 20px;
  padding-bottom: 1px;
  /* Prevents collapse */
}
.element2 {
  margin-top: 30px;
}

Conclusion

I hope you enjoyed this article, and that it gave you a sense of how to avoid the topmost common mistakes developers make when they write CSS. There are many mistakes not covered in this blog such as separating between layout and content elements, overusing flex box and much more. Comment below with some other mistakes.

以上が初心者が陥りやすいSSの間違いの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。