关于css能否写入js的问题，前端工程师普及一下

咦呀

react不就有这样搞法

kaleok

js攻城狮 发表于 2021-10-28 12:26
一个CSS-IN-JS和CSS Modules的事儿。。。

这样也不正确，还是没有理解独立运行的原理。css-in-js就是用js来预处理，这肯定是文章反对的主要观点，其实就包括了css的预处理比如，less,sass等。
css modules其实也是类似的，只是操作办法符合文章推荐的js处理class的观点。
但是普及的原因是独立运行，不要去理解vue,react等提出的新的处理css的方式。
想表达什么呢？就是webpack打包是不必要的，不论是打包js还是css，也不论是提取出来单独压缩css还是直接写入js里面的css。
而是说，css本身不属于逻辑语言，就是可见即所得的层叠样式表。
你自己写入.css外部引用，或者内部引用，或者内联方式。都是可以的。

如果你是vue或者react的开发者，你可以单独写入一个.css文件，用class方式绑定，一点问题没有的。

问题出在哪里？问题就是现在的前端第三方框架，都想用js来操作css，模块开发，全局生效或者局部生效都是动态修改[a23adcasd]类似这样的唯一标识码，而实现绑定的。

也就是说，css是完全独立的，操作方式本身就是dom绑定的方式，由于vue,react等开发者习惯了mvc的理念，无法理解为何还要单独操作dom的步骤，所以把css理解为了逻辑语言,是js的一个子功能，才是问题的关键所在。

hins

能写 麻烦的很

robot

辛苦打这么多字了

可乐呀

以 index.html 为入口文件的不是 webpack 是 parcel。
如果你们说的 把 css 打包成一个 js 文件，那是用的 webpack 的 style-loader，是通过往 html 注入 style 标签的方式添加样式。
然而事实上生产环境一般没人会用这个 loader

react-scripts 和 vue-cli 这两个官方的脚手架处理生产环境时样式都是用的 mini-css-extract-plugin，会单独拆分 css 文件。只有开发环境时才会用 style-loader

1. 问题出在哪里？问题就是现在的前端第三方框架，都想用js来操作css，模块开发，全局生效或者局部生效都是动态修改[a23adcasd]类似这样的唯一标识码，而实现绑定的。

复制代码

这个不一定是 css in js， 也有可能是 css modules 或者 vue 的 scoped style

在 React 里使用css in js一般用的都是 styled-components。

什么是 CSS-in-JS?
“CSS-in-JS” 是指一种模式，其中 CSS 由 JavaScript 生成而不是在外部文件中定义。

注意此功能并不是 React 的一部分，而是由第三方库提供。 React 对样式如何定义并没有明确态度；如果存在疑惑，比较好的方式是和平时一样，在一个单独的 *.css 文件定义你的样式，并且通过 className 指定它们。

https://zh-hans.reactjs.org/docs/faq-styling.html

不要去理解vue,react等提出的新的处理css的方式。

css modules 和 Vue 的 style 标签和 css in js不一样。Vue 算是个语法糖你可以在 .vue里写样式，不想写也可以分开
css modules 和 style scoped 都解决了样式的作用域问题，用的人还是比较多的。
css in js用的人相对就比较少了

对css in js抵触可以理解，但是 css modules 是无辜的

可乐呀

可乐呀 发表于 2021-10-28 14:01
以 index.html 为入口文件的不是 webpack 是 parcel。
如果你们说的 把 css 打包成一个 js 文件，那是用的  ...

对 css in js 和 css modules的争议没有必要。
我只是想说 如果把 css扔js里变成一个文件，那如果是webpack一般用的是 style-loader
但是事实上 React 和 Vue 脚手架在生产环境都用的是 mini-css-extract-plugin 而不是 style-loader

所以讨论这个是没有必要的。因为生产环境本来就不推荐 style 标签注入的方式

如果说对打包工具的争议那是更没必要的，这会让前端不知道倒退多少年

ChenYFan

ouou8 发表于 2021-10-28 10:44
竟然为了这个 说了这么多。大佬就是大佬。

不过我是不建议把css写入js。感觉上维护起来很麻烦。

有点，如果开发的程序是单独一个作为插件植入，绑定css能很大避免冲突

逸笙

kaleok 发表于 2021-10-28 11:55
你这样来反驳就有点过了，要更正你可以单独发帖，为什么要来纠正我认为对的，你认为错的事情呢？你的观点 ...

我没在说你观点对错……
我一直在强调，你的举例，是手写html，并不是jq，
但你的上文的意思是接下来举例是jq。
怎么就成了我在说你对错。

逸笙

我不太会用jq，其它框架就更不会了。
我的OM上传都还在用xhr。
在我印象中，jq都是$.()这样的，你2楼这样是最原生的手写，我就这么干的。

气味

……虽然看不懂
但是大为震撼！！