编写高质量的CSS

2024年5月6日 102次阅读 来源: yuqy

分层组织CSS

我们应用CSS的能力应该分成两部分：一部分是CSS的API，重点是如何用CSS控制页面内元素的样式；另一部分是CSS框架，重点是如何对CSS进行组织。

推荐一种组织CSS的方法：
base.css + common.css + page.css

base层：reset功能+通用类
common层：组件级别的CSS类
page层：页面级别CSS样式

模块化CSS——在页面中引入面向对象编程思想

如何划分模块？

  • 模块化可以让代码高度重用，显著提高开发效率。

  • 我们拿到设计稿的时候，首先可以从视觉上进行划分，样式和功能相对独立且稳定的一部分就可以视为模块。
    这里介绍两个拆分模块技巧：

    • 模块与模块之间尽量不要包含相同的部分，如果有相同的部分，应将他们提取出来，拆分成一个独立的模块。

    • 模块应在保证尽可能少的原则下，做到尽量简单，以提高重用性。

CSS命名空间

这里推荐一种在class前加入前缀的方式构建类似于命名空间的概念. 举个例子：

<div class="box">
    <div class="box-hd"></div>
    <div class="box-bd"></div>
    <div class="box-ft"></div>
</div>

还需注意一点：css class的命名推荐使用英语，不要使用汉语拼音。

挂多个class还是新建class? — 多用组合，少用继承

举个例子，有两个列表，列表条目1字体14px红色,列表条目2字体16px绿色：
方案一:

<ul class="number-list1 f14 red">
    <li>1111</li>
    <li><2222/li>
    <li>3333</li>
</ul>  
<ul class="number-list2 f16 green">
    <li>1111</li>
    <li><2222/li>
    <li>3333</li>
</ul>

然后分别为number-list1与number-list2设置样式

方案二 :

<ul class="number-list1 f14 red">
    <li>1111</li>
    <li><2222/li>
    <li>3333</li>
</ul>  
<ul class="number-list2 f16 green">
    <li>1111</li>
    <li><2222/li>
    <li>3333</li>
</ul>

然后，将样式分解为颗粒度小的class内，利用类组合达到效果。这就是多用组合少用继承的思想。

如何处理上下margin

模块化写类的样式时，常常需要写margin样式。这个时候不建议给某个div同时设置margin-top, margin-bottom值。因为可能会带来上下margin重合的问题。

  • 如果不确定模块的上下margin特别稳定，最好不要将它写进模块的类里，而是使用类的组合，单独为上下margin挂上用于确定边距的之类。

  • 模块做好不要混用margin-top和margin-bottom，统一使用margin-top或margin-bottom。

低权重原则

复习一下CSS权重问题：
CSS的选择符是有权重的：id选择器的权重是100、class选择器的权重是10、标签选择器的权重是1；

  • 当不同选择符的样式设置有冲突时，会采用权重高的选择符设置的样式。

  • 如果CSS选择符权重相同，那么样式会遵循就近原则，哪个选择符最后定义，就采用哪个。（就近原则指的是定义样式的先后，不是挂class名的先后）

我们在设置样式时，适当使用子选择器，可以增加CSS的权重。例如：span .font{} 的样式会覆盖.font{}的样式。但CSS选择符的权重越高，样式越不容易覆盖。为了保证样式容易被覆盖，提高可维护性，CSS选择符需保证权重尽可能低。

CSS sprite

什么是CSS sprite?

将网站的多张背景图合并到一张大图上，这便是CSS sprite.

CSS sprite 优点？

CSS sprite出发点已经不仅是“解决滑过状态时背景图片出现空白”的问题了，通过将多张图片合并成一张大图，会大大减少网页的HTTP请求数，减小服务器压力。这对于流量比较大的网站很有价值。

哪些场合不适合使用CSS sprite?

  • CSS sprite只能合并用于背景的图片，对于<img src=“”> 设置的图片，是不能合并到css sprite大图中的。如果合并这些图片会影响页面的可读性。

  • 对于横向和纵向都平铺的图片也不能使用CSS sprite.

这里扩展一个问题: 我们在写页面时，对于图片，是使用img标签好呢？还是使用background-img属性好呢？

以下对二者进行一个对比总结：

  1. 本质区别：img标签是html标签，background-img是CSS的一个样式；

  2. 加载方面：img标签是html结构的一部分，img 会在加载结构时进行加载，而background-img会在结构和内容加载完成后才开始加载；

  3. SEO方面：搜索引擎会关注img标签的alt属性；这时如果使用了background-img则页面可读性比较差；另外，有些网站需要在禁用css情况下运行，此时比较重要的图片例如logo，就需要使用img标签而不是background-img.

  4. 在多数场景下，二者都能完成工作。比如hover切换图片，可以改变img的src属性，也可以改变background-img的url; 比如改变图片的位置，可以改变img元素的位置，也可以改变background-img的postion;

CSS sprite有哪些缺点？

CSS sprite将多张图片合并为一张图片，通过控制background-position进行定位，这对于图片的位置精确程度要求非常高。定位完成后，大图中的每个小图的坐标值不可轻易改动，这在一定程度上降低了可维护性。

因此，如何排列图片能够尽量紧凑，同时保证不会影响扩展性，是CSS sprite技术最困难也是最具挑战性的地方。

以上，从分层组织CSS，模块化CSS，使用时注意低权重原则，以及巧用CSS雪碧图阐述了提高CSS代码质量的四个方面。更多方法还需在实践中积累。

References

[1].编写高质量代码-Web前端开发修炼之道 — 曹刘阳.

    原文作者：yuqy
    原文地址: https://segmentfault.com/a/1190000006712692
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞