教你编写8个简单的CSS代码

这8个简单的提示将帮助您编写干净，高效和有用的CSS。

编写更好的CSS不一定是艰苦的磨难。对您在CSS代码文件中工作的一些细微调整可能会产生很大的影响。在本文中，我们将介绍八种简单的方法来改善CSS技巧，编写更干净，更高效，更好的CSS代码。

01.从CSS重置开始

CSS重置为您提供了一个干净的基础
有些人可能会认为使用CSS重置是不必要的。然而，CSS重置可以让您从一个干净的基础开始，使您更轻松地为您的网站设计风格，并提供更可预测的结果。

CSS重置将重置或覆盖浏览器的默认样式。您可以编写自己的，使用在线可用的许多重置之一，或使用两者的组合。

02.知道什么时候使用CSS速记

速记应该减少文件大小，并有助于加快加载时间
CSS简写使您能够在单行中设置元素的多个属性。使用速记可节省空间，减少加载时间。但是，你不应该把它用于一切。

有时候，手头提供了非常需要的清晰度。但更重要的是，当您只需要设置一个或两个属性 - 或者您只需要覆盖某些东西 - 可能实际上更好。

还有一件要记住的事情：当你使用速记时，被忽略的属性将被重置，这可能会产生不良影响。

03.保持干燥

不要重复你自己
编写更好的CSS代码可能最好的建议是遵循DRY方法。DRY意味着“不要重复自己” - 实质上，不要一遍又一遍地使用相同的代码。

将事情保持在CSS中的一种方法是将事情分组在一起。我们来看一个例子。

原始CSS

.menu li { color: red; } .menu li a { color: red; }

重组和干燥

.main li, .main li a { color: red; }

您可以看到，这不仅可以减少CSS文件的总体大小，而且可以缩短加载时间，但您也可以在维护方面受益。如果颜色属性需要更新，您只需要更新它的一个位置。

您还可以使用CSS自定义属性来帮助保持DRY。自定义属性创建如下：

:root { --primary-color: red; }

然后可以随时使用CSS代码中的任何地方使用它们：

.main li, .main li a { color: var(--primary-color); }

04.停止使用！重要

有很少的场合，你需要使用！重要。它是最多（如果不是最多的）被误解和过度使用的声明之一。

不要误会我，重要的是有它的地方，但是一般情况下，Web开发人员在绝望的情况下使用它。所以为了解决这个问题，他们通过添加重要的声明给他们一些更多的权力。

问题是，这将启动创建迅速变成一个维护的噩梦，随着越来越多的东西都宣布了多米诺骨牌效应！重要的。只有使用！重要，当它是绝对必要的。

保持一致

无论您如何编写CSS，以及添加属性的顺序，请保持一致。有些人按字母顺序排列他们的属性，而其他人使用更多的逻辑方法 - 例如，按行长度或类型组织事物。我选择前者，但完全取决于你。底线是你选择的，坚持下去，所以很容易找到事情。

06.智慧地命名事物

对您的选择器使用标准命名约定
这似乎是一个没有脑子的人，但是在命名你的选择器时，不要过于复杂。简明扼要，坚持使用标准的命名约定。

提出选择器名称时需要考虑的一些事项：

避免演示文字：这些是涉及颜色和显示位置的文字（例如，绿色文本或顶级菜单栏） 只使用小写： CSS是区分大小写的，所以不要像MeNuBaR那样创建名称。然而，应该指出的是，骆驼案（menuBar）是可以接受的做法，在某些情况下是不喜欢的 使用破折号分隔多个单词：例如，主菜单。您也可以使用骆驼盒（mainMenu），但是再次，这通常不是首选 不要太具体：您将最终对同一类型的元素使用多个选择器。例如，可以组合列表一和列表二，创建单个列表项
07.酌情添加评论

虽然好的代码不需要注释，但在某些情况下也需要添加注释到代码。这里的经验法则是，如果源代码将从评论中受益，然后添加它; 否则，不要。

如果您想知道有什么意见可能需要，这里有几个例子：

评论代码：如果您注释掉特定部分的代码，出于特定原因，请留下解释该原因的评论。如果你不这样做，你可能不记得为什么你首先评论了它 热修复：如果您添加“修补程序”，添加评论也许是个好主意 提醒：您可能会在任何时刻处理多个项目。如果您有机会完成某件事情之前，您的注意力被拉下来，您可以使用评论来提醒您仍然需要做的事情 说明：如果一段代码不清楚，并且您觉得有一个解释将有助于清除它，然后添加一个评论 - 这很简单

08.浏览Flexbox

Flexbox是网页设计中最新的游戏规则

当调整页面上的元素时，弹性框布局模块（或Flexbox）可以完全控制。使用flex容器和flex项目，您可以精确地定义事物的外观。Flexbox还使您可以在页面上垂直排列项目，这不是浮动的。

本文来源于上海网站建设公司与上海网站设计制作公司-垒越科技上海公司！

• 上一篇：在网页设计中如何正确使用面包屑导航
• 下一篇：网站优化的常用方法和详细操作步骤