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中文网其他相关文章！