Question

我对样式标记和Javascript有疑问。许多插件或脚本都带有一个单独的CSS文件，用于样式化。那么，避免这种情况是不好的做法，并使用样式标记并将其附加到页面的头部，然后将这些样式用于您的插件？

例如，此代码：

var style = document.createElement('style');

style.type = 'text/css';

style.innerHTML = '.hg-grid-item-4{ width: calc(24.25% - '+Options.padding * 2+'px); padding: '+Options.padding+'px; float: left; margin-bottom: 1%}';

document.getElementsByTagName('head')[0].appendChild(style);

会在不需要外部CSS样式表的情况下为网站添加一些样式。这会导致旧浏览器出现问题吗？

另外，正如您在我的示例中所看到的，我使用了一个变量作为填充和宽度。如果你愿意使用外部CSS，有没有办法做到这一点？提前谢谢！

Answer 1

在大多数情况下，你不需要CSS中的calc（） - 这总会让事情变得缓慢，而且一般来说过于复杂，几乎总是以更简单的方式完成
按照您的方式做事并不考虑非js版本。所以不是最好的做法，特别是当你设置像.hg-grid-item-4这样的东西时，所以我假设你使用了一些网格。如果JS禁用，这不会破坏吗？
它使代码不易维护 - 不确定将逻辑与样式混合的原因是什么？一般来说，最好使用Sass作为示例，并在那里定义您的Options.padding，如果这不是真正需要用JS计算的东西。是吗？

Answer 2

使用JavaScript将样式标记添加到DOM对于JavaScript来说是完全合法的，但是，这不被视为＆＃34;最佳实践。＆＃34;

编写代码时，最好将视图与应用程序逻辑分开。最简单的方法是将所有样式放在CSS文件中。此外，它还有一个额外的好处，就是让您的代码更容易让其他开发人员理解。

了解更多信息：

关于你的变量填充问题，在vanilla CSS中，这是不可能的，为了在CSS中使用变量，你需要使用CSS预处理器，如SASS或LESS。但是，我认为这对你的问题来说太过分了，你可以使用Flexbox制作灵活的样式，或使用百分比代替固定的边距或填充。

通过javascript追加多个样式的样式标记是不好的做法吗？

2 个答案: