3

我总是使用 CSS 预处理器来处理与 Web 相关的项目。CSS 预处理器几乎可以让你做 CSS 让你做的所有事情,但支持 DRY 编码原则和更清晰的语法。不过我想知道 - 为什么不完全放弃样式表?为什么不制作一种可以编译为 JavaScript 的样式语言呢?JavaScript 显然无论如何都可以完全控制 CSS 样式,所以它应该是可能的。这种语言也将比 vanilla CSS 强大得多,因为它可以启用逻辑,例如基于元素大小和位置的选择器、浏览器窗口大小等。一个人为的可能性示例:

div#test {
    if windowWidth > 800px {
        width: (windowWidth / 3 + 10)px;
        height: 200px;
    }
    else {
        width: 100px;
        height: 50px;
    }
}

或者一个绝对定位的 div,但是当它向下滚动太远时应该跟随窗口:

div#side_panel {
    position: absolute;
    top: 100px;
    right: 25px;

    if windowScrollY > 90px {
        position: fixed;
        top: 10px;
    }
}

我已经尽我所能在谷歌上搜索了这个主题,但没有任何成功。是否有任何样式语言允许动态样式(例如我的示例中的样式)并编译为 JavaScript?如果不是,为什么不呢?这在性能方面不可行吗?或者可能存在浏览器支持问题?


我知道一些浏览器,包括 Chrome,公开了一个名为的对象document.styleSheets,它使 JavaScript 可以完全控制文档的样式,这对于这类项目来说是完美的。

4

1 回答 1

0

几年前我也想过。

在我的结论中,第一点是 CSS 是为网页设计师而不是为网页开发者设计的。设计师在一次又一次地制作相同的艺术作品方面非常有创意,但在编程逻辑和编程语言方面也非常愚蠢。那些简单的 if-else 就足以让他们发疯。

另一个,是性能。CSS 旨在为整个页面布局设置样式。即使使用 AJAX,JavaScript 也只能做很少的更改并处理较小的用户交互。简单也近在咫尺,想象一下如果我们只使用 JavaScript 从 HTML 文档构建整个布局。

还有稳定性问题。CSS 的解析和处理是由浏览器的引擎来处理的,这个引擎经过了很好的测试,比我们自己的 JS 代码要好得多。如果我们使用 Unobstructive JavaScript,当应用 CSS 并加载图像时,我们的网站将完全正常工作,因此如果 JS 出现错误,它仍然可以工作。想象一下,如果布局页面的 JavaScript 代码崩溃了。为此,我们只需要一个无限循环,它肯定是可用的。

最后,我们必须将 content-HTML、look-CSS 和 feel/behavior-JavaScript 分开。因此,只需提供 HTML 文档中的所有内容,即使它会保持隐藏状态。使用 CSS 以有效的方式为所有内容设置样式,并尽可能提供最佳的静态页面。然后使用 JS 只是对布局进行更改,并在需要更改时使用 if-else。

于 2013-02-15T01:31:27.720 回答