大佬们，你们前端 css 这个东西效率问题怎么说

[WishMeLz]

我个人平时的命名规范是学习 elementui 的命名规范，可能学的不完善，尽量在学习 打个比方： .main .main-info .main-info_mini ...

像 scss lass 这种 效率问题可以提高多少

[WishMeLz]

是 less，说错了，不好意思

[Pastsong]

要学规范的话就学 BEM

[Sapp]

用 css in js
放弃 class 命名，彻底就没这个问题了
还可以用原子化的 css 组件（ tailwind ）和 css in js 结合，大方向用写好的 class，小的和复杂的自定义用 css in js，我觉得当前真的没必要再去纠结个 class 了

[bigggge]

我们现在要不 styled-component，要不就 atomic css

[erwin985211]

我是原子化信徒呀，效率提高不止一点

[namelosw]

以下是用了各种都用了很多年的主观感受:

用 Tailwind 效率提升 500%. 因为写代码的最高境界就是几乎不写代码.
如果倾向 CSS in JS 还有个 Twin, 跟 Tailwind 一样的.

这个东西看起来有点 low, 感觉十年前就很多类似的做法, 但大多都不好用. 但 Tailwind 实际上很好用, 和其他类似的方案都很微妙的, 魔鬼都在细节里.

---

用 Styled 类似的方式或者其他 CSS-in-JS 效率提升 50%.

因为写 CSS class 再在 HTML 用 class 本质上是一个 correlation 的过程, 但是现在都已经组件化了, 等于这种 correlation 的工作翻倍了, 在组件原地定义就消灭了这种工作. 而还比较鼓励你设计好组件.

缺点是和已有大量用选择器的项目放在一起的时候会互相打架, 用起来比较尴尬.

---

此外 BEM 还行, 效率不会提升因为比较繁琐, 但是正确应用可以避免很多坑.

类似 SASS 的预处理器的问题就是很多项目用了 SASS 嵌套会特别爽, 然后人们就会无脑嵌套. 最后发现不仅优先级很乱且没法覆盖, 而且你在嵌套的过程中其实已经重复了一遍 HTML 的嵌套逻辑, 那么当你移动 HTML 的结构的时候所有的样式都会失效.

相比之下 BEM 刻意总维持 2 层结构, 既解决了命名空间的问题, 又解决

感觉 SASS 之类唯一比较有价值的是类似 mixin 的功能, 这样可以把样式拆小复用. 纯 CSS 没有 @apply 的情况拆小就要在 HTML 上无限重复, 改动的时候很容易漏.

[darknoll]

css 才是前端的精华，没有 css 后端都能转前端

[rodrick]

用 react 的各位是用那种方式多？ css in js 还是都 import 或者其他的方式

[yaphets666]

@darknoll 前端还有 canvas 和 webGL 炫酷的都是这个做的 css 一般只处理小问题 布局问题 超级简单的动画 复杂的不用 css. 网上那些 什么 codepen 啊啥的 纯粹是大伙娱乐和炫技的

[Ixizi]

css module

[binaryify]

我用 less 和 scss 最大的目的就是解决嵌套,其次是变量

[GzhiYi]

tailwindcss 香炸

[zzzzzzggggggg]

@GzhiYi 最近看到很多人在讨论 tailwindcss，得去看看了

[a62527776a]

感觉花太多时间性价比太低啊

[codingguy]

感觉几个技术解决的痛点是这些：
scss，less => 让 css 有逻辑（变量、嵌套、循环、函数）
css in js => 不用纠结 id，class 命名
tailwindcss => 不需要写样式

[sjhhjx0122]

直接 tailwindcss 是最方便的了，搭配 vscode 的插件，可以直接不用去翻文档了

[dartabe]

sass + css module 有啥不好的

tailwind 到底是比上面这个优势在哪

[GzhiYi]

@dartabe 说一点是不需要翻到 css 的代码位置就可以将大部分的布局写完，用 tailwinds 和 sass + css module 不冲突，可以一起使用。

[dartabe]

@GzhiYi 感觉自己也可以定义原子类啊 不冲突

[GzhiYi]

@dartabe 如果自己开发当然可以定义原子类（我自己也会写一些），但我认为像 tailwind 这样是设立一个命名基准，不必需要在多人协作的时候考究个人所写的原子类命名。