摘要：本文转载自众成翻译译者文蔺链接原文多年来，方法论层出不穷。不幸的是，并不存在适用所有场景的最佳选择。因此，如非知己知彼，争论方法论是很难得出结论的。此外，我使用这些方法论的时间并不够长，并不敢宣称了解全部。
本文转载自：众成翻译
译者：文蔺
链接：http://www.zcfy.cc/article/1828
原文：http://simurai.com/blog/2016/11/27/css-methodologies
多年来，CSS 方法论层出不穷。不幸的是，并不存在适用所有场景的最佳选择。本文介绍了一些适用于不同情况的 CSS 方法论。
好，跟我一起开始踩坑之旅吧。
我只需要创建一个单页面或简单的站点。内容以文本为主，可能会有一两个表单。没有人和我协作，就我自己（还有我家的喵）。
? 简单就好。直接给 HTML 元素添加样式，连 class 都不需要。依赖级联关系，利用样式继承。随着站点增长，可能需要开始看看 OOCSS，或不时使用一些工具类。
我们是一个中型团队。项目复杂度增长较快，采用多人协作。
? 使用 BEM、SUIT、SMACSS、ITCSS 或 Enduring CSS 等。它们各不相同，但也有相似点，在某些方面亦有重叠之处。它们所使用的命名约定，能保证你们之间不会发生冲突。和团队一起讨论下，在作出最终决定前，可能需要多进行一些尝试。
我们是有多个团队的大公司，产品庞大而复杂。跟踪变化相当困难。代码库不断变化，而我们又不想顾此失彼。
? 使用 JSX、JSS，或其他类似的 CSS-in-JS 库。将 CSS 与 HTML/JS 绑在一起，更容易修改、移动或删除组件，而又不影响其他部分。还可以看看 ACSS 这样的 Atomic CSS，这是另一种解决相同问题的思路。
以上三种情况可能最常见，但也存在更多的具体需求不尽相同的情形：
我希望从原型开始工作。
? 使用“单一用途类”，如 TACHYONS 或 BASSCSS。同时编写 HTML 和 CSS，这项工作也可以很自由。不用在文件之间来回切换，不用再为如何编写类名冥思苦想，只要根据所思所想，快速进行构建。
项目中有大量状态、大量需要在运行时更新的内容。
? 使用 CSS-in-JS 库。可以通过 JS 直接更新属性，无需查找类名或 DOM 节点。
我想发布一个 CSS 框架（啊我也想啊）。
? 使用带有命名空间的 BEM。如此一来，一定程度的保护作用的同时，尚能进行定制。此外，如果能够轻松定制主题也是极好的，比如提供一些便于修改的变量。
我想制作一个（不可定制的）第三方组件。
? 使用 CSS Modules。独有的类名，能够防止外部样式污染以及内部样式泄漏。此外，还可以考虑 iframe 或 Web Component。
我想在 CodePen 上创建 Demo。
? 用点新东西。这种时候，正好试试那些还不太熟悉的东西。
我讨厌我的同事。
? 使用链式选择器，如 .header > ul.nav li .button {}。你的同事会因此苦不堪言，而你则可以在一旁暗暗幸灾乐祸。
好了。啊等等... 最后一条不算数哈。关于链式选择器，我能想到的唯一使用场景，就是在无法访问元素的时候。例如，内容由 CMS 决定，无法更改。这种时候，链式选择器应该是最（wei）佳（yi）选择吧。
如你所见，不同使用场景太多太多。因此，如非知己知彼，争论 CSS 方法论是很难得出结论的。
最后一点想法：不必抱死在一套 CSS 方法论上，还需有所借鉴，并探索出一套适合自己的方法。切换新方法是可能的，有时候则是必须的。例如一个起始于简单原型、团队成员与日俱增、日渐复杂的项目。但切换 CSS 方法论费时费力，容易出错，事先进行一些计划能够减少后期的很多问题。选择愉快!
免责声明：我个人也难以做到绝对中立，不偏不倚。能做到的同学请举手。此外，我使用这些 CSS 方法论的时间并不够长，并不敢宣称了解全部。但我已尽可能保持客观中立了，如果你认为本文错误连篇，或者漏掉了重要内容，请点击链接尽情修改。
私货时间，欢迎关注微信公众号~
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/115349.html
摘要：它们都错误地使用了波浪选择器，并造成了很多地方的代码臃肿。大家可能以前也都遇到或者使用过波浪选择器，毕竟它作为选择器已经很长时间了，甚至都支持。我的经验里，使用波浪选择器一般都是通过而不是来选择兄弟元素的。 原文：The tilde CSS selector, use carefully! 最近我的一些项目都遇到了一些类似的样式问题。它们都错误地使用了波浪选择器，并造成了很多地方的CS...
摘要：这个方法论在内容和容器之间有着明显的区分。这是通过把命名为表示其角色的类名。通过使用这种扁平的命名方式避免了多后代的选择器。 原文链接：A Look at Some CSS methodologies CSS在大型，复杂，快速迭代的系统中难以管理的程度是出了名的。 其中一个原因是CSS缺少内置的作用域管理机制。在CSS中，所有的一切都是全局的，这意味着任何你所做的改变都有可能层叠或者改...
摘要：这个方法论在内容和容器之间有着明显的区分。这是通过把命名为表示其角色的类名。通过使用这种扁平的命名方式避免了多后代的选择器。 原文链接：A Look at Some CSS methodologies CSS在大型，复杂，快速迭代的系统中难以管理的程度是出了名的。 其中一个原因是CSS缺少内置的作用域管理机制。在CSS中，所有的一切都是全局的，这意味着任何你所做的改变都有可能层叠或者改...
摘要：全文为这些年，我曾阅读深入理解过或正在阅读学习即将阅读的一些优秀经典前端后端书籍。当然，如果您喜欢这篇文章，可以动手点点赞或者收藏。 全文为这些年，我曾阅读、深入理解过（或正在阅读学习、即将阅读）的一些优秀经典前端/Java后端书籍。全文为纯原创，且将持续更新，未经许可，不得进行转载。当然，如果您喜欢这篇文章，可以动手点点赞或者收藏。 基础 基础书籍 进阶 进阶阶段，深入学习的书...
摘要：全文为这些年，我曾阅读深入理解过或正在阅读学习即将阅读的一些优秀经典前端后端书籍。当然，如果您喜欢这篇文章，可以动手点点赞或者收藏。 全文为这些年，我曾阅读、深入理解过（或正在阅读学习、即将阅读）的一些优秀经典前端/Java后端书籍。全文为纯原创，且将持续更新，未经许可，不得进行转载。当然，如果您喜欢这篇文章，可以动手点点赞或者收藏。 基础 基础书籍 进阶 进阶阶段，深入学习的书...
阅读 2641·2023-04-25 18:10
阅读 1552·2019-08-30 15:53
阅读 2712·2019-08-30 13:10
阅读 3178·2019-08-29 18:40
阅读 1093·2019-08-23 18:31
阅读 1175·2019-08-23 16:49
阅读 3373·2019-08-23 16:07
阅读 853·2019-08-23 15:27
