有时候打开最新CSS样式的styles.css文件时,你会发现它长2,000行,而需要更改的类在中间。但是你不知道是否可以编辑该类,因为它可能会使页面完全改变。作为最后的选择,你可能转到文件的末尾并创建一个新类,以添加到已经有七个其他类的元素上。对于使用CSS足够长时间的开发人员来说,这是一种常见的体验。

因此,让我们谈谈编写优质CSS的目标是什么。目的不是创建聪明而复杂的规则。不是设计一个选择器字符串,以使其尽可能广泛地适用。好的CSS的目标应该是编写简单,模块化,最重要的是易于维护的规则。在这里,我们为你提供一些简单而明智的规则,以帮助你创建和维护健康的代码库。

1.向文件添加顺序和结构

首先,考虑根据开发人员之间达成一致的结构将样式分解为自己的CSS文件,然后再坚持使用。打开组织不良的样式文件夹是一种可怕的经历。你不知道哪些文件包含哪些样式,以及更改一种样式将如何影响另一种样式。请记住,如果你为每种样式都提供了自己的文件,然后将它们全部链接在一起或最后将它们缩小到一个样式。

分页结构是最令人困惑的方法之一。如果你正在“关于”页面上工作并且需要修复某些内容,请转至about.css文件。这样可以避免影响about.css之外的样式的问题。然后,你所需要做的就是检查about.css文件中的更改。但是,这不能解决文件长度的问题。相当长的页面很容易包含超过1,000行CSS。内部构造文件是减轻这种情况的一种方法。在文件内按字母顺序排序意味着如果你正在搜索以C开头的内容,而该内容不存在,那么你就知道它不包含在内。

正确的CSS文件顺序

这也适用于已经存在的样式。通过按字母顺序对所有内容进行分组,你可以查看样式是否已在整个文件中写入了三四次。

.boundingBox{
        padding: 1rem;
}
.headerChildren{
        padding: 10px 5px;
        background: #ccc;
}

2.建立一个基本的CSS文件

并非所有样式都只能属于一个页面,并且在多个页面上存在样式是很常见的。具有适用于整个企业而不只是网站的样式也很常见。在这里,你将编写非常普通的样式,这些样式实际上并不属于任何内容。例如,你将使用的不同颜色,字体,排版以及特定于你网站的任何重置。

你可能还希望在本节中包括类似于组件的基本样式,例如按钮,表单元素和警报样式。将此部分视为你网站的样式指南。这不仅使你的站点更容易维护CSS,而且还可以确保样式统一应用。在这里,你可能要包括属于网站部分的样式,这些样式在多个页面上重复出现,例如页眉或页脚。如果这些部分中的样式很多,则可以帮助将其分解为自己的文件,例如header.css和footer.css。

请注意,不要在那些实际上不属于这些文件的文件中开始包含样式。请记住,凌乱的文件夹结构是使维护CSS困难的好方法。

3.将布局与其他CSS分开

那些熟悉SMACSS的人可能熟悉这样的想法,即可以将布局样式与你将应用于网站的更一般的样式分开。通过将这些样式与CSS的其余部分分开,这意味着你可以更轻松地专注于不同部分的外观,而不必关注它们相对于靠近它们的部分的行为。这可以通过添加网格系统(例如流行的Bootstrap库)或自己实现来实现。此时,最好与网站的设计师交流,因为许多设计师在创建网站时都会使用网格系统,因此你希望尽可能地接近该网格。

4.模块化编写CSS

分离布局CSS揭示了另一种简化CSS的方法。与CSS相关的方法很多。有SMACSS,BEM,OOCSS等,但无论你是将它们称为节,零件,模块,组件还是模块,它们都具有共同点。那就是他们试图在你的样式表中添加可重用和专用的部分。浏览器以对或错的方式应用CSS:如果样式与应用的样式相匹配,则如果样式不匹配,则将其跳过。这允许作者不打算应用的样式仍然匹配并更改页面的外观。当我们以模块化方式编写CSS时,我们通过封装样式来减少这些副作用。

组件或模块是HTML的一部分,被分组在一起并且其样式相互影响。创建模块化CSS就是要确定什么时候属于一个组,然后将其与周围环境分开。这意味着你无需担心外部,也无需担心内部的任何模块。

5.避免过长的选择器

当编写组件时,很容易使它们相对较浅,在类选择器中的深度不超过2到3层。但是,在到达你要定位的元素之前,某些组件可能会使你向下延伸五,六,甚至更多层。请记住,CSS不能像JavaScript那样抽象出问题。它没有控制流程或功能。不过,这是一件好事,因此不要尝试通过创建较长的选择器链,深度嵌套的样式或高度通用的样式来模仿它。

创建CSS的方法有很多,你从事的每个项目都会略有不同。尽管几乎不可避免的是任何代码库最终都将需要大修,但是你可以使用这些原则来减缓这种情况的发生。在任何时候,你都应该专注于确保样式干燥,封装,可读和可搜索。启动所讨论的原则将有助于确保将来可以更轻松地维护和更改事物。因此,请记住对文件系统和文件保持一些顺序。命名空间和模块化你的样式。分开的基本样式,布局样式和一般样式保持分开的关注点。