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

[WishMeLz]

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

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

[namelosw]

@charlie21 我理解你说的意思, 但是在这个具体 case 上不太赞同

> 但 css 这种技术根本不需要 wrapper
CSS 很多东西是比较底层的, 有没有 wrapper 效率会差 N 倍, 我 Tailwind 写一会够别人吭哧一上午的.

> 要用就用 General Purpose 的东西
CSS 也不是 General purpose 的, 很多东西 CSS 根本写不出来, 还得 JS 实现. 因为这个就不用 CSS 就很怪了.

[yazoox]

@Sapp 兄弟，你这里说的 css in js 是什么意思？类似于用 styled module 在 reactjs 里面？

[JerryCha]

.have-no-idea-name

[jin5354]

大厂里写原子类信不信会挨打

[Shook]

我用 tailwind，然后搭配组件内的 scoped 以保持样式的独立。
在每个组件内想怎么命名都可以，用 tailwind 规范 spacing 、colors，写样式就会很快很方便。
当然，一些比较通用的样式，还是需要用 @layer 来写的。

[PainAndLove]

可以看看 tailwindcss

[Lemeng]

跟着大佬们一起进步

[yaphets666]

@codingguy 不是极少也是少数 统计数据还是 less sass 大幅度领先

[ccraohng]

非组件库用 css module .
要写 css 的时候，
要么就是后台魔改一些布局功能，
要么就是 ui 出了设计稿，我本来就会 css，还去记些？用了我还要去找差哪些样式。
可以翻翻上面某些人的记录。。。

[godgc]

tailwindcss 可以的 推荐

[maomaomao001]

@namelosw 关键就在于 , 写 C1 组件 和 按钮组件的开发人员 d1 并不可能会写上一个 selector (比如给他写好一个 class 叫 btn-common 之类的), 而是 d2 开发的时候,已经完全是只包含 bg-red 等之类的原子类型了 , 也就是 别人使用这个组件的时候,根本不可能(也没有办法用正确的选择器选到这个组件(如果真的只有一个按钮,也许可以用 button 这样的 tag 选择器来选择,然后附加上 d2 想要的样式)

至于你说的第二个方案, 通过 prop 拼类名 (那么就得修改 按钮组件,让它支持通过 props 传入 class), 这个还是违反了我想说的完全不去修改任何已有的代码的情况了 ...

大概就是,总的来说,有个组件开发好了 (这个时候并不知道 会被用到其他 20 个场景下, 样式完全不一样 , 有的甚至布局都变了) , 那么开发这 20 场景下的开发人员,不修改 这个组件,通过外部修改样式的唯一方案,我实践过的就只有类似 BEM 的 方案了 , Tailwind 看了几次, 还是感觉没法复用 (不是 css 没法复用, 是用 Tailwind css 写的组件没法复用 , 要不就要到处通过 props 传 class) ,做一些特定修改 .
如果有 Tailwind 这个方面的实践相关的, 可以推荐一下

[youla]

CSS 需要一个超级英雄来拯救 https://stylus.bootcss.com/

[karnaugh]

个人理解
[BEM]
命名规范，是为了解决很多 class 在同一层时互相起名困难，是名字语义化，但是写起来类名实在太长了。。。

[scss,less,postcss]
进化版 css，可以搞变量、加函数，最主要的是写 css 时可以嵌套了，直接就降维解决了 BEM 要解决的问题。
但是注意千万不要用 css 嵌套写法拼接 class 去写 BEM，别人接手代码去修改时简直就是灾难！

[tailwindcss 及其他原子类]
这东西应该是混合上述两个使用的，不应该单独拿出来用，而且十分不建议用原子类写具体样式

个人倾向于跟布局大方向有关的使用原子类，比如常见的左右浮动和清除浮动「 fl,fr,clearfix 」，比如 flex 布局，我将 flex 布局整个抽成原子类在使用「 https://github.com/KarnaughK/FastFlex 」

其他类似于长宽、padding/margin 、文字样式、以及绝对布局相关等、颜色阴影边框等等，都是写在 css 里，这样的好处是 html 具有一定的可读性，单看 class 就能知道这个布局是横着还是竖着，是居中还是靠左，css 里只需要关注具体的样式，每一个 class 只对应精确的元素的样式，减少与其他元素的样式关联

[namelosw]

@maomaomao001 感觉你这个方向就不太好... 组件就是组件, 要是什么都能任意改就不是组件了, 像 ng1 继承 scope 的 controller 一样到处侧漏……

外部能修改, 其实就跟动态作用域一样, 像 JS 的 this 和 shell 的变量都是那种动态作用域. 但是一个正规的语言都是文法作用域, 定义的时候定死而不是动态靠外部覆盖, 不然软件的行为没法预测, 很难维护.

[namelosw]

@karnaugh 我就是能用 Tailwind 原子类就只用它, Tailwind 的官网上明确写了你应该靠组件抽象而不是 CSS 类.

仅当写比较诡异项目需要改来改去的才会 selector. 这样其实挺好的, 关键是主动出击, 和 designer 反复交流搞出来一套规则, 不能想哪出是哪出.