CSS编程人员最常见最容易犯的十种错误

以下是大多数网络开发人员常犯的一些错误，以及如何识别和避免这些错误才能帮助你写得更好、更多。

1. 使用速记

CSS 速记是一组允许同时设置多个属性值的 CSS 属性。这些值之间用空格隔开。例如， border 属性是 margin-top 、 margin-right 、 margin-left 和 margin-bottom 属性的速记。

//Not Using Shorthand
.example{
margin-top:10px;
margin-bottom:19px;
margin-left:10px;
margin-right:19px;
}
//Better way
.example{
margin:10px 19px;
}

2. 响应式设计

如果您的网站是响应式设计，请避免使用 px，而使用百分比。下面的示例中，容器的大小为 1000px，这是不正确的，因为不同的屏幕设备会有不同的显示效果，所以在显示的时候会固定为 1000px。

//Not correct way
.container{
width:1000px;
}
//correct way for responsive
.container{
width:100%;
}

3. 重复相同的代码

如果你需要其他类的属性，不要写新的代码，使用用逗号( , )分隔的类。

还有一点，如果需要为元素添加额外属性，请使用其他类，并为该类编写 css，这样可以减少重复代码。

//Not correct
.box1{
width:50%;
margin:20px;
}
.box2{
width:50%;
margin:20px;
}
//Correct
.box1,.box2{
width:50%;
margin:20px;
}

4. 无字体后备

什么是后备字体？后备字体是指在主字体尚未加载或缺少呈现页面内容所需的字形时使用的字体。例如，下面的 CSS 表明 Helvetica 字体家族应作为 “Arial” 的后备字体使用。

//Not good
body{
font-family:Helvetica;
}
//Good
body{
font-family:Helvetica, Arial,Sans-serif;
}

有些浏览器可能不支持某些 CSS 字库，因此我们可以使用回退功能，它将支持下一个字库，而不是默认字库。

5. 使用颜色名称

更好的方法是使用十六进制颜色代码，而不是颜色名称。

//Not good
.example{
color:green;
}
//Good
.example{
color:#00ff00;
}

6. 复杂的选择器

当你可以对某个元素直接使用类时，就不应该用不同的选择器嵌套来使其复杂化。

//It is good some times, but better to don't go eith complicate
header .navigation ul.nav-links{
list-style-type:none;
}

为简单起见，您可以只使用类，这样也便于阅读和理解。

//Better
.nav-links{
list-style-type:none;
}

7. Z-Index 错误

许多开发人员使用很高的 Z-Index 值将元素放在前面。

当你想把另一个元素放在其他元素前面时，Z-Index 值就会变得越来越高。

.modal-container{
z-index:545;
}
.modal{
z-index:5345345;
}

解决的办法是使用适度的数值，这样就不会造成长时间运行的现象。

.modal-container{
z-index:1;
}
.modal{
z-index:2;
}

8. 名称不一致

我的观点是，在准备网页内容的基础上，CSS 类名或 id 名应该是这样的才更好。

我的意思是，如果我们使用的是其他开发人员一眼就能理解的名称，那就不需要搜索了。

.header{
font-size:2rem;
}

9. 何时使用类和 ID

当我们访问元素的值时，最好使用 ” id “，在准备设计时，我们使用类， id 是唯一的，类可以多次使用。

i) id 是唯一的，因此访问数据很容易，使用类时，我们需要为该元素添加索引，如 [ 0 ]。

let name = document.getElementById('name').value;
console.log(name);

ii) 类可以重复使用，因此最好采用这种方式。

Paragrah

.classData{
margin:20px
}

10. 忽视跨浏览器兼容性

不同浏览器对 CSS 规则的解释可能不同，从而导致跨平台的视觉效果不一致。在多个浏览器上测试你的 CSS 代码，并考虑使用 CSS 前缀或特定于供应商的前缀来兼容旧版本的浏览器。

在代码中编写新的 CSS 属性之前，使用 https://caniuse.com/ 检查哪些浏览器支持哪些 CSS 属性。

结论

总之，避免 CSS（层叠样式表）中的常见错误对于创建设计良好、高效的网页至关重要。CSS 在控制网页内容的视觉呈现和布局方面发挥着重要作用。避免这些错误，就能确保你的 CSS 代码整洁、可维护，并兼容不同的浏览器和设备。