SS初學者常犯的錯誤

CSS 並不像看起來那麼簡單，開發人員常常會犯一些錯誤，讓他們不知所措。 CSS 被認為是一種不直觀且難以使用的語言，因為這些常見錯誤阻礙了大多數開發人員嘗試編寫 CSS。因此，大多數開發人員選擇使用 Bootstrap 和 Tailwind CSS 等 CSS 框架，以避免編寫自己的 CSS。

在這篇部落格中，我們將討論開發人員經常犯的五個常見錯誤。認識並避免這些錯誤將幫助您編寫 CSS：

• 跨裝置工作，而不僅僅是筆記型電腦
• 第一次嘗試就有效
• 它讓你不再對 CSS 感到沮喪

讓我們開始吧。

錯誤 1：不要使用 CSS Reset

這是我令人驚訝的發現之一，我才意識到我一直以來都做錯了 CSS。瀏覽器有預設樣式，如果樣式表不存在，可以作為後備樣式。但是，這些預設樣式在不同瀏覽器中是不同的。無論如何，兩個瀏覽器很少提供相同的預設樣式，因此確保樣式有效的唯一真正方法是使用 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 單位表示字體大小、邊距、填充以及高度或重量屬性而感到內疚。雖然在某些情況下使用 px 單位沒問題，但過度依賴它們會導致可訪問性問題。

根據 MDN，無法以 px 定義字體大小，因為使用者無法在某些瀏覽器中變更字體大小。例如，視力有限的使用者可能希望將字體大小設定為比網頁設計師選擇的大小大得多。如果您希望創建包容性設計，請避免使用它們作為字體大小。

但是，px 單位也不利於設定內容的高度和寬度，因為如果使用者增加瀏覽器中的預設字體大小，內容也可能會溢位。當使用者放大或變更預設字體大小時，在媒體查詢中使用 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 開發中最容易被忽略的問題之一是使用過於具體且難以覆蓋的過度限定選擇器。 ID 選擇器在 CSS 中具有更多特異性，這表示您無法覆寫它們或在其他元件中重複使用樣式。

始終以使其工作所需的最低程度的特異性來編寫 CSS 選擇器。包含所有這些額外的內容可能會讓它看起來更安全、更精確，但對於 CSS 選擇器來說，只有兩個等級的特異性：特定和不夠特定。

？錯誤

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

✅ 正確

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

一般來說，你應該避免在 CSS 中使用過於具體的選擇器。 CSS 特異性錦標賽說明了為什麼使用功能過於強大的選擇器是一個壞主意。當一個選擇器在錦標賽中非常強大時，它會很快並且很早就獲勝，這意味著擊敗它的唯一方法就是編寫一個更強大的選擇器。

這種特殊性總是升級的趨勢稱為特殊性戰爭。與儲存核武類似，在這場戰爭中沒有人會獲勝——隨著具體性的增加，事情只會變得更難緩和。避免全面的特異性戰爭的最佳方法是首先不要使用高度特異性的選擇器。

錯誤4：命名顏色

我在研究時發現的另一個錯誤是命名顏色的問題。開發人員經常忽略您認為的特定顏色在不同瀏覽器中看起來非常不同。

透過說：顏色：紅色； 您實質上是在說瀏覽器應該顯示它認為的紅色。如果你從讓東西在所有瀏覽器中正確運行中學到了什麼，那就是你永遠不應該讓瀏覽器決定如何顯示你的網頁。

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中文網其他相關文章！