保持JavaScript和CSS同步的实践？

2022-12-19 17:19:04

我正在研究一个庞大的JavaScript应用程序.几个JavaScript有一些相关的CSS规则.我们目前的做法是为每个JavaScript文件提供一个可选的相关CSS文件,如下所示：

MyComponent.js  // Adds CSS class "my-comp" to div
MyComponent.css // Defines .my-comp { color: green }

这样我知道与MyComponent.js相关的所有CSS都将在MyComponent.css中.

但事实是,我经常在这些文件中只有很少的CSS.而且我常常觉得创建一个完整的文件只需要包含几行CSS就太费劲了 – 只需在JavaScript中硬编码样式就更容易了.但这将成为黑暗面的道路……

最近我一直在考虑将CSS直接嵌入到JavaScript中 – 所以它仍然可以在构建过程中被提取并合并到一个大的CSS文件中.这样我就不必为每个小块创建一个新文件了.另外,当我移动/重命名/删除JavaScript文件时,我不必另外移动/重命名/删除CSS文件.

但是如何在JavaScript中嵌入CSS呢？在大多数其他语言中,我只使用字符串,但JavaScript在多行字符串方面存在一些问题.以下看起来恕我直言：

Page.addCSS("\
  .my-comp > p {\
    font-weight: bold;\
    color: green;\
  }\
");

还有哪些其他做法可以让您的JavaScript和CSS保持同步？

解决方法:

我对CSS文件的看法是它们描述了定义应用程序主题的规则.最佳实践通常声明内容,表示和行为应该分开,以便更改该主题相对容易.通过拥有多个CSS文件,这变得稍微困难一些,因为设计人员可以处理更多文件.

此外,CSS(Cascading StyleSheets)规则受其在CSS文档中的位置的影响.通过在每个文件中使用具有不同规则的多个CSS文件,可能更难以确定哪个规则优先.

最后,如果你想知道你的JS文件中的CSS选择器与CSS文件匹配,请尝试使用酷搜索工具,如grep,如果你在linux上.如果您使用的是良好的IDE,您也可以使用它来快速搜索规则,然后您可以跳转到行号.我认为将CSS规则保存在不同的文件中没有任何好处;这只会使问题复杂化.

另外,我建议反对将CSS内联的想法.通过这样做,您将不可避免地使您的网页设计师更加难以快速轻松地更换样式.外部CSS的重点在于您的网页设计师可以更改主题或为不同的用户提供多个主题.如果您将CSS嵌入到JavaScript或HTML中,那么您就可以将内容,行为和表示紧密结合在一起.

最佳实践通常建议将内容,行为和表示分开以实现此目的.

码农公寓