190323&说说你对 CSS 的理解和认识

最新推荐文章于 2023-06-25 10:40:25 发布

向阳敲代码

最新推荐文章于 2023-06-25 10:40:25 发布

阅读量1.2k

点赞数

文章标签： css

本文链接：https://blog.csdn.net/qq531295642/article/details/105808199

版权

说说你对 CSS 的理解和认识

对于前端开发者来说，css 的使用已经司空见惯了。那对它到底有个什么样的理解和认识呢，下面我来说说我对其的理解和认识

囫囵吞枣来一遍

CSS 这项技术产生的原因，主要还是时代下的产物。当时网页特别流行，而对于样式的需求越来越迫切，CSS 就是用来解决网页的美观问题的。

对于如何使用 CSS 来说，最简单的做法就是跟着 w3cschool 的教程一个一个的学习一遍也就会了。

那么紧接着问题就来了，就这么简单吗？上手如此简单？

是的，会写 CSS 并不难，但能写好 CSS 那就不一定了。写代码的姿势有很多，想要得心应手的管理还真不是那么简单。

大致有这么几种方式。

直接写 CSS，不采用任何的 CSS 处理器
通过 CSS 处理器写，然后再编译成 CSS
直接写 CSS，通过 PostCSS 在处理
通过处理器编译出 CSS，再使用 PostCSS 二次加工
CSS In JavaScript

一开始的时候，想尽办法在类命名，命名空间，文件结构 3 个地方做处理，比如 BEM、SUITCSS、MCSS、AMCSS 等。

@simurai曾经总结过一些选择方法，但原文地址已经404了。大致摘取下来的内容是这样的：

Q: 我只需要创建一个单页面或简单的站点。内容以文本为主。没有人和我协作，就我自己。

A:简单就好。直接给 HTML 元素添加样式，连 class 都不需要。依赖级联关系，利用样式继承。随着站点增长，可能需要开始看看 OOCSS，或不时使用一些工具类。

Q:我们是一个中型团队。项目复杂度增长较快，采用多人协作。

A:使用 BEM、SUIT、SMACSS、ITCSS 或 Enduring CSS 等。它们各不相同，但也有相似点，在某些方面亦有重叠之处。它们所使用的命名约定，能保证你们之间不会发生冲突。和团队一起讨论下，在作出最终决定前，可能需要多进行一些尝试。

Q: 我们是有多个团队的大公司，产品庞大而复杂。跟踪变化相当困难。代码库不断变化，而我们又不想顾此失彼。 A: 使用 JSX、JSS，或其他类似的 CSS-in-JS 库。将 CSS 与 HTML/JS 绑在一起，更容易修改、移动或删除组件，而又不影响其他部分。还可以看看 ACSS 这样的 Atomic CSS，这是另一种解决相同问题的思路

一个 CSS 架构具备良好的可扩展性，细心的规划能提供下列的好处。

更少的样式
更少的样式冲突
更长的维护周期
更快的提升新团队成员
团队成员之间更容易交流
更平稳的项目交接

为此，也就创建了 CSS 的具体规则，每次编写之后，复查这些规则。

模块化：设计系统在每一个方面都是模块，这是非常实用写 CSS 的方法，但在组件之间需要清晰分隔。
可读性是关键：开发者必须在第一眼理解 CSS 代码，并且理解每一个选择器的目的
清晰胜过简洁：设计系统有时候看上去很冗长，但是作为交换，它提供清晰和韧性。保持 CSS 可读性和可扩展性意味着牺牲简洁的语法。
保持平面化：长的选择器要回避，无论什么地方，尽可能保持 CSS 独立 DOM 和模块化
避免冲突：因为组件会部署许多不用的应用，保证设计系统之间的 CSS 不会和其他的库和系统有冲突，这很重要。通过系统空间- [ ] 命名 Class 名可以完成这个。

再然后呢，出现了