Question

由于CSS的许多限制和兼容性问题而感到沮丧，并且发现自己经常需要编写javascript代码以使我的网页按照我想要的方式进行布局，我想我可以通过完全放弃CSS来简化页面结构来简化未来的项目

我编写了一个javascript库，它解析XML文件中指定的布局，并使用绝对定位和大小的非嵌套div将它们应用于HTML文档。因此，我们的想法是每个页面都有一个包含所有内容的HTML文件，一个XML文件，指定如何在页面上排列内容，以及一个用于表面样式的CSS样式表。

Here is an example.（按下按钮以扩大布局。在所有主流浏览器的最新版本中测试。） And another.

此系统优雅地降级为普通html，甚至允许在禁用javascript的情况下单独设置样式。

在我看来，这种方法不仅消除了许多跨浏览器问题，而且还允许我以更少的工作实现更复杂的布局。例如，我的理解是单独使用CSS不能完成以下操作，至少在没有嵌套div的情况下是这样：

设置元素以填充其父容器中的可用宽度或高度。（这与宽度/高度不同：如果父容器中还有其他元素，则为100％。）
将任何容器中的任何元素顶部/中心/底部，左侧/中间/右侧对齐，即使其大小未知。
填充未知大小的元素，而不增加元素大小（例如，如果div设置为窗口大小的100％，则不能在不溢出窗口的情况下填充它。）
自动将父元素中的所有元素设置为等间距。
设置浮动元素的高度。同样，水平和垂直独立设置收缩包装行为。
将元素设置为以列而不是行浮动（CSS3似乎支持列，但浏览器兼容性不佳）

尽管如此，我确信这被认为是亵渎神明的。那么，使用这个系统来布局网页有什么潜在的问题呢？

编辑：the code is on github

Answer 1

从本质上讲，你试图以一种比CSS更好的方式重写CSS。这可能很好 - 也许它适合你 - 但你将面临限制。

世界其他地方使用CSS。让一个人（你）学习并遵循标准通常比试图让世界其他人学习并遵循你的标准更容易。如果您与其他人一起开发，而不是能够将他们的CSS和HTML知识带到桌面上，他们将不得不学习您的Web开发方法。

如果你去其他地方工作，你要么必须说服他们把你的方法带到桌子上，而不是使用世界标准的CSS（这通常不会在公司环境中飞行），或者你必须学习如何正确使用CSS。

如果您希望从其他任何人那里获得帮助（例如此处的stackoverflow），您将无法使用，因为其他人都使用CSS。但是如果您遇到CSS问题，我们将能够提供帮助。

这就是为什么它可能被视为“亵渎神灵”。我敢肯定你写了这个问题，打算收到关于这种方法的潜在技术问题的反馈，但我认为政治/社区问题同样重要。

Answer 2

您已经发明了一种更强大的页面布局系统。您应该注意到CSS已经具有其他此类系统的草案规范：

以下是January 2013 overview这些提案，是2011 overview的后续内容。

这些规格只是草稿。其中一些可能最终会被废弃或与其他规格合并。一些浏览器已经实现了这些规范的一部分，通常在供应商前缀之后。

虽然您今天无法在CSS中可靠地使用这些功能，但在编写库时应考虑这些规格的设计。您应该复制他们的设计部分，这些部分提供强大的布局工具，或者是干净且面向未来的。

最好不要编写自己的JavaScript库和XML语法，而只使用现有的JavaScript polyfill，例如这些（不是详尽的列表）：

您可以使用草稿的语法将这些polyfill与CSS结合使用。

即使这些polyfill功能不全或不够稳定，您也可以从库中调用它们，或者至少复制一些代码。

Answer 3

“对CSS的许多限制和兼容性问题感到沮丧，并发现自己经常需要编写javascript代码以使我的网页按照我想要的方式进行布局”建议你使用CSS错误的，或者实际上没有足够的时间来学习CSS的来龙去做它你想做的事情（设置好的，通用的CSS很难，就像编程JS-并且有一百万种方法做错了 - 就像编程JS一样。）

您的示例似乎基于100％高度的页面工作。一旦您将html和body设置为高度：例如100％，这实际上相对容易。一旦你这样做，h / valigning的盒子变得非常容易。

然后，回答你的问题：使用JS调用所有样式都比使用CSS要昂贵得多，所以我强烈怀疑你的解决方案比一个好的CSS或CSS + JS解决方案表现得更差。浏览器具有极其优化的代码，用于执行CSS触发的重排，并且在JavaScript中执行相同的操作要慢几倍。使用JS进行特定样式化，因为CSS缺少一个功能，比如像你的例子一样进行盒子对齐，这通常是必需的，但是每次运行它时，它都必须在JS代码中重新运行完整算法，而不是使用本机编译器更快的回流库，可能适用于您想要实现的某些或所有布局。

Answer 4

除了您必须确保所选择支持的所有浏览器的相同输出之外，我认为没有任何问题。此外，您还必须处理页面上元素数量是变量的情况，例如照片库或评论页面。我可以从经验告诉你，绝对定位的许多小元素会严重降低页面的性能。当你达到50-100个元素时滚动和调整窗口大小时你会注意到这一点。相反，做Google Images在这种情况下所做的事情;将元素设置为display: inline-block并控制它们的宽度，然后允许它们自然换行。

另外我觉得我应该指出，＃1和＃2可以很容易地在CSS中使用position: relative在父级上使用，position: absolute在子级上使用，点＃3可以是通过在孩子身上设置box-sizing: border-box来解决。您可以使用padding-box，但这并不受支持。

CSS3也正在解决您的一些问题。你提到了CSS3专栏。看看calc也是如此。例如，您将能够以动态大小为中心元素：

left: 50%;
top: 50%;
margin-left: calc(-width / 2)
margin-top: calc(-height / 2)

使用此系统布局网页有哪些潜在问题？

4 个答案: