2020 年的造型感觉如何？

本文受此文章启发。

我采用相同的格式——两位开发人员之间的对话，其中一位为经验不足的开发人员提供了不同的选择。Jose 的文章主要关注 JS 工具和环境设置，而我决定另辟蹊径，拓展一个最近讨论活跃且容易混淆的话题——CSS 和样式。

顺便说一句，我建议你把这篇文章当成一个有趣的参考，而不是拿它和你现有的技术栈做比较。毕竟，Web 开发早就进入了这样一个阶段：最重要的技能就是学会不该学的东西。

嗨！
好久不见，我的朋友！

听说你还在写代码？
是的，主要是前端！最近怎么样？

你知道，由于职业变动，我从 2016 年起就没写过一行代码。昨天，我的一位老朋友联系我，希望我为他的公司创建一个新网站。他希望网站能自定义样式，并且完全响应式。
真棒！有个好的副业项目总是很棒的！

我之前用 React 开发过一个类似的项目模板，想用它做基础。问题是——它自带一个长达 3000 行的 CSS 文件，非常难理解，很多内容重复，结构混乱等等。我打电话来是想听听你的建议。
我很乐意帮忙，有什么问题尽管问我。

所以，我最初的想法是重新看一下，清理掉不必要的内容，重新排列顺序，并添加注释，让内容更直观。
好吧。你打算在一个 CSS 文件中完成所有这些操作吗？

是的。我需要创建一些配色方案，添加一些用户操作的交互性，修复一些媒体查询等等，所以我觉得这个应该可以实现。
这肯定是可以实现的，虽然现在我再也不会用原生 CSS 了！

考虑到我给你的几个要求，我有什么选择？
比如，你可以使用一些预定义颜色、已实现效果和响应能力的框架。

哦，像 Bootstrap 那样？
你可以用。虽然我不太喜欢。

为什么？我的意思是，我离开的时候它就很流行了。
现在仍然如此。还有一些其他的，比如 Foundation、Bulma、Materialize、Semantic UI 等等。

那为什么不直接用其中一种呢？
它们各有优缺点。主要的缺点是网站看起来太熟悉、基于模板，而且说实话，很枯燥。

哦，那么我是不是只能自己设计样式了？
别误会。当然可以，但那样的话，你就得重写很多东西，得添加很多自定义 CSS。

我明白了。不过框架至少可以简化我的布局和响应速度吧。对了
，你现在用的是什么布局方法？

我使用 CSS 浮动。
如果你不想影响样式，或许可以使用 Skeleton 或 Pure CSS 之类的轻量级 CSS。

纯 CSS？我的样式表已经是纯 CSS 了！
不。还有一个轻量级的库也叫纯 CSS——一组小型、响应式的 CSS 模块。

奇怪。好吧，既然如此，我对它们都不熟悉。
那你至少应该把布局升级到 Flexbox。

天哪！那是什么？
Flexbox 是一种一维布局模型，它提供了界面中项目之间的空间分配以及强大的对齐功能，而无需使用浮动或定位。

听起来不错，反正我从来就不喜欢浮动。为什么你提到 Flexbox 时说“至少”？
我的意思是还有其他布局方案，比如 CSS GRID。

它有什么作用呢？
本质上，它比 Flexbox 更强大，使用二维布局系统。

二维？比如 X 轴和 Y 轴？
它允许你以行和列的方式布局内容，并且拥有许多功能，使构建复杂的布局变得简单。

好吧，看起来是个很强大的工具。我想我应该会用。
虽然学习起来可能比较费劲，但一旦掌握了，回报还是很丰厚的。

那么，我的样式设计方案有哪些呢？
你可以编写自定义 CSS，并使用 CSS 变量、混合、嵌套、导入等扩展功能，甚至可以使用一些数学和辅助函数来完善样式，使其更加条理清晰。

CSS 中的变量和函数？我没听错吧？
完全正确！

这是CSS中一些我不知道的特殊语法吗？
你可以使用一些CSS预处理器来实现。

对此您有什么建议？
例如，您可以尝试 SASS/SCSS。

两种？它们之间有什么区别？
SASS 是一种样式表语言，它有两种语法。最新的一种被称为大括号语法，简称 SCSS。第二种较老的语法被称为缩进语法，简称 SASS。目前主要使用的只有最新的一种。

那么，他们是故意使用不同的语法名称来混淆大众吗？
SCSS 实际上是 CSS 的超集，类似于 Less。两者的发布时间大致相同。

Less？下一步是什么？一个叫 More 的预处理器？
嗯，我还没听说过。不过，现在谁也说不准。

很好。好像没什么需要我补上的！
我不想让你困惑，但还有其他预处理器，比如 Stylus、CSS Crush 和 Myth。

停！够了！我们继续！
好了。你跟我说过，你可能在做动画，对吧？

我目前还没有计划那么多，但可能会有一些功能，比如渐变色、盒子阴影和过渡效果。
这意味着你以后可能会用到一些实验性的 CSS 功能。我建议使用一些后处理器来实现。

它们是什么？我们现在要从“前”切换到“后”吗？
CSS 后处理器可以解析常规 CSS 并进行转换，无需任何特殊语法。例如，通过这种方式，你可以确保在需要时自动添加供应商前缀。

那么我该如何实现呢？
你可以使用 PostCSS 和自动前缀插件来实现。

糟糕，我有点糊涂了！
各种 PostCSS 插件还能帮你做更多更酷的事情，比如识别 CSS 中的错误和不一致的约定，自动更改类名以避免名称冲突等等。

好了，带我回去！我们说到哪儿了？SASS？
如果你喜欢它的话。他们称之为 CSS 的超能力。

不过，这些处理器都没法给我提供任何最佳实践的指导，对吧？
很遗憾。所以你必须选择一个合适的 CSS 架构，一个编写 CSS 的方法论。

比如什么？
比如 BEM。

那么，无论它意味着什么，它的作用是什么呢？
本质上，它是一种命名约定，通过根据块中组件的嵌套级别创建类名，使你的前端代码更易于阅读和理解，更易于使用，更易于扩展。它使用了块、元素和修饰符模式。

是的，但是这样的话，类名会不会变得很冗长呢？
这取决于标记的复杂程度。如果你愿意，还有另一种选择，叫做 SMACSS。

你只是随便编造的吗？那有什么不同呢？
这种架构的理念是避免在一个文件中混合多个类别的代码，因为即使找出一行简单的代码来修改也会非常复杂。CSS 结构基于五个类别：基础、布局、模块、状态和主题。

哦，那么另一个遵循事件更详细模式的吗？
是的。您还可以查看其他一些，例如 OOCSS 和 SUITCSS。

好吧，有一件事是理所当然的。接下来的几个月，就不用再睡8小时的觉了。
其实没那么可怕。说到底，这些只是一些关于如何构建你的风格的指导。

所以，一旦我选定了架构，我只需要把 CSS 扩展改成 SCSS，导入就可以了？
不完全是。首先，你需要在项目中设置它，然后将其编译成常规 CSS。

真是惊喜！那我该怎么做呢？
你需要先安装 node-sass 包才能使用它，然后在脚本中包含 watch 命令，这样每次有更改时都会重新编译。或者你也可以使用像 Webpack 这样的打包工具来实现。

好吧。这么说来，我的 SCSS 仍然是一个需要导入到 React 组件的外部文件了？
没错。

好吧，终于！至少我们达成了一致！
你知道吗？等等！既然你要设计组件，你或许应该试试 CSS-in-JS。

等等，什么？CSS-in-JS？你的意思是直接在 JS 里写 CSS 吗？
嗯，有点像。

我以为 CSS 和 JS 是两种不同的技术！？
嗯，它们确实是。我的意思是，现在不一样了。

拜托！别跟我说你在开玩笑！
我没开玩笑。现代 Web 开发其实已经这样发展了一段时间了。

那么，我是不是应该把 SCSS 的所有内容都粘贴到我的组件里，然后祈祷它能奇迹般地工作呢？
不，首先你需要安装合适的依赖项来设置 CSS-in-JS 支持。例如，React 有一个名为 styled-components 的库，允许你在应用中编写组件级样式。

那么我应该在哪里以及如何编写它们呢？
Styled-components 使用带标签的模板字面量来设置组件的样式。您需要创建一个变量来保存样式，并充当内容的包装器。

这么说我的样式现在都是字符串了？这太让人困惑了！
是啊，可能需要一段时间才能习惯。不过，如果你更喜欢传统方式，也可以使用内联样式。首先，将样式规则定义为对象属性，然后通过 JSX 使用 style 标签将它们添加到元素中。

对象属性？这意味着样式仍然直接包含在 JS 文件中，对吗？
是的。好吧，如果你不想直接在组件中定义样式，可以使用 CSS 模块。

CSS 中的模块？我刚知道 ES6 引入了 JS 模块。
实际上，它并非官方规范或浏览器中的实现，而是构建步骤中的一个过程，它会更改类名和选择器以使其作用域化。请确保在文件名中包含 modules.css 文件，否则它们将无法正常工作。

我明白了。因为我熟悉 JS 的概念，所以我可能会用它们。
不过，在你最终确定方法之前，我还是建议你看看其他 CSS-in-JS 库，比如 Radium、Aphrodite 和 Emotion。

我以为我们是朋友！？这么多 CSS 和 JS 混在一起有什么意义？
根据项目情况，可能真的有很多。但简单来说，它的主要优势肯定是它能让开发人员将组件的 UI 和行为封装在一个源码里。

好吧。那应该有人创建一个像 JSS 这样的工具，然后就此打住！告别 CSS！
你知道吗？CSS 真的存在。

现在，这简直太荒谬了！
JSS，也就是 React-JS，是一个 CSS 创作工具。这是一种新的样式策略，目前还没有太多的改进。它与框架无关，由多个包组成，例如核心包、插件包和框架集成包。

我之前打电话给你，是想请教一下我的原生 CSS，现在我们聊起了 JSS 这个工具。太棒了！
你说得对，别再提这个了！或许你更倾向于一些低级的、实用优先的方法。

这简直是​​疯了，伙计！
不不不！我是认真的！我建议你研究一下 Tailwind CSS。Tailwind 提供的不是那些刻板的、预先设计好的组件，而是底层实用类，让你可以构建完全自定义的设计。

是啊，是啊……你这么说，好像我都会用似的！
其实你应该研究一下 Atomic CSS 架构。它只是定义了一组代表单一用途样式单元的类。你甚至可以使用像 Atomizer 这样的工具来生成样式表。

听着，兄弟！所以你一直跟我提那些胡言乱语，从花哨的框架和多维布局，到神秘的预编译编译器、混合 CSS-in-JS 库、各种 CSS 架构，再到现在的 Atomic CSS 生成工具，只是为了让我烦吗？
不，你为什么会这么想？我之所以提到 Atomic CSS 方法，是因为它是最新的，而且相对于其他方法论来说相当激进。样式是通过类来实现的，每个类只有一种样式。将样式分解成原子的，或者说不可分割的部分。一个基本的鼠标悬停时前景色和背景色的变化，可以像下面这样简单的一行代码<div class="Bd Bgc(#0280ae):h C(#0280ae) C(#fff):h P(20px)"></div>：

够了。你想让我脑袋爆炸吗？
不过，哥们，我只是想……

你觉得你很有趣吗？这是我的。没有 CSS。现在怎么样？现在谁是国王？
听起来很奇特，虽然……

我说够了！我要把所有样式都删掉，希望我的客户能看到我设计得很棒的项目。如果他再打电话过来，我会回答说这些是隐形样式，只有被选中的人才能看到。

—通话结束—

你好？

希望您喜欢阅读！

欢迎在Twitter、LinkedIn、Hashnode和DEV上关注我以获取更多信息！