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

[WishMeLz]

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

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

[murmur]

@dartabe 标准化，可读性，但是这个标准化也是半标准，比如 tailwindcss 只能告诉你能用多大、多大、多大的组件，却没告诉你什么时候用多大的组件，写起来还是一人一个样

最多是比如规定我一个网站只能用 12 、14 、16 号字体，能拦住别人用 13 、15 、17 的，但是你拦不住别人在 btn-sm 里用 16 号字的

[dartabe]

@GzhiYi 好像有什么 BEM 命名法？ 所以到头来 tailwind 就是命了名。。。。。。

反正我是看不懂 我觉得确实可能都用最好

[dartabe]

而且很多框架都自带 帮助类 感觉基本就是一回事儿 不知道这 tailwind 是咋火的

[yaphets666]

@dartabe 正经写前端 以前端为职业的 用这种 tailwind 的极少 用这些东西的都是 其他方向 转前端 或者 不是以前端为职业的

[WishMeLz]

@yaphets666 我就是正经写前端的。我一直都用 bem 命名法写的。可以说一直都是 style 标签里面直接写

[yaphets666]

@WishMeLz tailwind 是在 class 里写类名 不是手写 css

[KuroNekoFan]

bem 应该不潮了，从 react 阵营来说，css-in-js 为代表的原子 css 在最近一年更火热

[JoStar]

BEM 对团队要求蛮高的，因为要命名足够规范而且不重复。

tailwind 颗粒度非常细，初次学习成本很大，过了这个阶段还是很不错的。

我自己选择的是沿用 tailwind 的思路，以 oocss 的方式去写，颗粒度会大一些，但是学习成本低一些。

less sass 最早是解决 css 无法设定变量、函数的问题，新的 css3 已经原生实现不少功能了，但我还是习惯 sass，毕竟组里的人都习惯它了，也没什么坏处。

总的来说，方案很多，要根据自身团队的情况选择一个平衡的方案。

[abelmakihara]

@dartabe 感觉和他们不是一个世界的..
看了下官网的例子又冗长又不优雅 这是怎么火起来的？
常用的字体大小什么原子类就得了 这不是走火入魔本末倒置了吗
复杂点的写那么多好用在哪了 有那么多冲突的机会吗？
我个人感觉 css module 还算是比较中庸好用的一个选择了

[mara1]

@namelosw tailwind 这么多类名看得头都大了， 怎么记啊
我从官网 copy 过来一段：

<div class="flex flex-col">
<div class="-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
<div class="py-2 align-middle inline-block min-w-full sm:px-6 lg:px-8">
<div class="shadow overflow-hidden border-b border-gray-200 sm:rounded-lg">
<table class="min-w-full divide-y divide-gray-200">
<thead class="bg-gray-50">
<tr>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Name
</th>

[codingguy]

@yaphets666 #24
用 tailwind 的专职前端确实很多，并不是极少，有相关的统计数据 https://2020.stateofcss.com/

[maomaomao001]

@namelosw
tailwindcss 有没有办法做到 从外面覆盖(修改一些样式),
举个例子 ,
A 页面 , 有两个组件 C1
C1 里面有个按钮 红色背景的 ,

然后现在来了个新需求, 需要 把组件 C1 放在 父组件 C2 , 需求是在 C2 里面的 C1 里的按钮需要表现出 蓝色背景 + 红色边框 ,
那么问题来了, 如何在不动 C1 和 按钮的源代码的情况下, 实现这个需求 ?

大概就是 开发者 d1 在第一天开发好了 C1 和 按钮

那么第二天 开发者 d2 在复用 C1 的同时 (而且也不修改 C1 的情况下), 让里面的按钮显示出不同的样式 ?

[Jirajine]

@mara1 不需要你记，这些类名都是缩写，并且描述了它的作用。你需要啥效果就敲啥，再配合补全和预览，写起来很快。
当然 tailwind 用的爽的前提是本身对 css 非常熟练，门槛比较高。业余前端项目弄个组件库或者 bootstrap 这样的一把梭就是了。

[maomaomao001]

@maomaomao001 一个组件 C1

[wlchn]

CSS Modules，用过 SCSS, CSS in JS，最终更喜欢 CSS Modules 的方式，大概有以下一些优点:
1.避免了复杂项目 css class 重名问题。
2.避免了只用 scss 可能会嵌套很多层的问题。
3.可以根据 dev，prod 不同环境编译成不同形式，比如 .main 在 dev 编译成.main-xxxx,在 prod 编译成 .xxxx 兼顾可调试性与体积。
4.与 css in js 相比，保持了 css 单独文件的写法，与写 css 方式差别不大，更顺手，这个看人喜好。

[codingguy]

@mara1 #30
效果是啥，类名就是啥。
比如横向滚动，对应的 css 就是 overflow-x: auto，类名就是 overflow-x-auto，不是见名知意吗。

[namelosw]

@mara1 https://tailwindcomponents.com/cheatsheet/

[charlie21]

如果把 CSS 当作一个 SDK，把 tailwind 当作一个 wrapper，那么它的问题在于：
1 它是一个 css 的 wrapper，但 css 这种技术根本不需要 wrapper
2 它作为一个 wrapper，学习成本已经超过了 原始 SDK 的成本

tailwind 之于 CSS，等于 GTK# 之于 GTK，完全是 porting 过去的。是激进做法。激进的意思就是时刻处于被淘汰边缘，而且一旦维护团队放弃维护它，它会是无人接手的那种

github.com/troxler/awesome-css-frameworks 这里把 Tailwind 放在 Specialized 就是这个意思

[charlie21]

要用就用 General Purpose 的东西

[namelosw]

@maomaomao001
一个办法是写 CSS, 然后用 selector + @apply. Tailwind 并不会阻止你一行 CSS 不写.

另外一个办法是不改源码只能组件靠 JS 搞一个 Lambda 进去当 prop 拼类名. 但是这样做并不好. 你也可以试想把问题从 CSS 换成 JS, 不修改源码, 怎么让组件支持新功能? 你还是可以传 Lambda 进去, 但是绝大部分时候你不用每个组件都写得这么灵活, 不然代码就没法读了.

--

如果你横向看一下这些解决方案, 就会发现越现代的 CSS 方案越不好实现你说的这种需求. 比如 Styled 是基于组件的, 虽然也不能覆盖但是至少还能用选择器. 到了 Tailwind 就更不好覆盖了. 这是因为开发和设计都在逐渐推行组件化和 atomic 设计. 有了这些基础才能真正高效的开发.

回到说的问题, 如果你想有不同的行为和样式, 应该重新思考组件怎么设计和组合.