怎样理解css中id的唯一性以及与class的作用有什么不同，期待中，，谢谢！
发布网友
发布时间：2022-04-21 12:17
共3个回答
懂视网
时间：2022-04-21 16:38
CSS 作为 Web 的基础部分，极其容易上手。但是 CSS 并不算的上是一门编程语言，在语言能力上略显薄弱，往往导致整体的维护性变差。但是这并没有使得大家停止对 CSS 的探索，从命名规范，目录架构，预处理器(如 SASS)，后处理器（ PostCSS），模块化等等的方向上，努力把 CSS 变得更好。
关于自我历程
其实我自己并没有系统的学习过 CSS（虽然我现在也不知道如何系统的学习），看了几个视频，扫了下中文版的 API，然后就开始了切图生涯，很多的知识点也都是后来一些零散的博客中了解到的。这过程中，的的确确踩过不少的坑，有的填了，有的继续祸害着项目里其它的同学。也导致我在很长的时段时间里都是走在一个混乱无序的 CSS 书写当中。
最早遇到的大概的是命名的问题了吧，因为本身积累的词汇量就少，动不动就没单词可用了。那个时候好像也就是网上列出一大堆像 menu， siderbar之类的“命名大全”来模仿。再到后来接触到了 Bootstrap这种比较系统的框架（里面有好多可以值得借鉴的地方），而后又看到一些按类别划分文件，再配有特有的前缀的管理方式(那个时候还并不知道 SMACSS的名词)，还有一些原子化，把功能和样式分离等等的。在 SASS兴起的时候其实挺兴奋的，因为终于感觉有了点编程的能力，当然了，对变量，嵌套， mixins等等的使用，很大程度上提高了编程效率。在后来同事的分享中，又了解了 BEM 的命名方式（初看很乱，了解后有一种豁然开然的感觉，细细回想起来，也就是大家约定一套共用的命名规范）。以及通过 PostCSS去实现 CSS 中一些自动处理的任务。在 React/ES6/Webpack 出现后，使得很大一部分程度上，CSS 写在 JS 中的方式也开始在特定的场合中频频出现。
以上，通通出现过我的项目中，在项目切换维护的时候，那感觉，心如刀割。并不是说上面涉及到的知识点有对错的问题，只是在一个团队中，如果没有一些统一的架构和约定，往往到项目的后期会变得越来越不稳定。这不禁又让我想起了 CSS 的学习曲线（像PHP？又来黑了），样式大家都能写，能愉快的维护，又是另一个层次了。
个人觉得 CSS 中有两个比较重要的点， 语义化和 可维护性，而最终都是为了提高开发的效率。
语义化很大一部分程度上是为了阅读需要，简易明了。建议团队内还是要尽量的保持风格一致。其它的，可以看一下 CSS语义思维的内容，这里不展开讲了。
可维护性真的是一个很虚的概念，但是涉及到了多方面的各个点。比如，该怎么保持项目的简单性，灵活性，而同时又有足够的扩展能力？又比如如何抽取模块，是以功能划分还是以样式结构？如何重用样式？如何防止样式被覆盖，避免冗余代码等等。
除了一次性的单页面这种外，一般项目类型的，都建议在开始的时候就搭好底层，统一一下整体风格与使用习惯，保持良好组织结构，命名规范，不然越往后面，可能会遇到更大的问题。
比如，对文件做一个层次划分
基础框架（reset，iconfont，栅格）
通用模块（原子，统一规范的模块）
页面样式（继承通用模块）
采用类似 BEM/SUIT等等的命名方式等等。
现有的技术选择
其实我们在平时应该或多或少的接触过一些 SASS, Compass, BEM, SMACSS, OOCSS的概念与设计模式。当然并没有一种解决方案是绝对的，合适当前的项目就可以了。
BEM
用于解决项目命名规则问题。BEM 通过已 block(块)， element(元素)， modifier(修饰符)的概念，使用连接符串联父级块作为前缀，来实现功能模块命名的唯一性。有兴趣的同学可以看一下 BEM的进化史。发现一句话并不太好表述清楚，想要具体了解的同学可以移步 官网。
BEM这种唯一性以及元素间的平级展开，往往在稍微复杂一点的项目里，就会把名字命名的很长很长。目前也有很多是在 BEM的基础上衍生出来的一些方式(如 SUIT)。
OOCSS （Object Oriented CSS）
面向对象 CSS。是一种已面向对象的维护方式去管理组织 CSS 代码。其哲学理念是模块化，功能单一性，关注点分离。
OOCSS 中有两个重要的原则
结构和外观分离。样式尽量独立，和 DOM 无关
容器和内容分离。CSS 只关注内容
OOCSS与 SASS结合是一个不错的选择，充分强大。
SMACSS(Scalable and Modular Architecture for CSS)
可扩展和模块化 CSS。把 CSS 样式划分为若干个不同类别的文件，如基础，布局，模块，主题等等。在加上一些特有前缀的组合。
ACSS (Atomic CSS)
原子化 CSS。遵循关注点分离原则。
CSS 模块化
随着 React的迅速引爆，其它关于 CSS 的另一种使用方式也在兴起。将样式在 JS 中定义。借助 require/import而解决了 CSS 中的命名空间的问题，使得单文件变得简单清晰。而通过组合，也可以实现快速的重复利用。甚至有些 CSS 可以单独与组件去绑定。
以及其它的一些方式。上述的方式，是比较让我眼前一亮的感觉。
未来走向
待补充...
扩展阅读
热心网友
时间：2022-04-21 13:46
我只能对“css中id的唯一性”做一点个人的理解：就是打cs（反恐精英，一款射击游戏）的时候，输入一个比较特别的id，你的队友就不会把你误当成敌人误杀（id的唯一性）
热心网友
时间：2022-04-21 15:04
