7

Frustrated by the many limitations and compatibility issues of CSS, and finding myself constantly needing to write javascript code to get my webpages to layout the way I wanted, I thought I might be able streamline future projects by ditching CSS altogether for page structuring.

I wrote a javascript library which parses layouts specified in XML files, and applies them to an HTML document using absolutely positioned and sized, non-nested divs. So the idea is that each page has an HTML file containing all content, an XML file specifying how that content should be arranged on the page, and a CSS style sheet for superficial styling.

Here is an example. (press the button to inflate the layout. tested in latest version of all major browsers.) And another.

This system degrades gracefully to plain html, and even allows for separate styling in the case that javascript is disabled.

It seems to me that this approach not only eliminates many cross-browser issues, but also allows me to achieve more complex layouts with less work. For example, my understanding is that the following cannot be done with CSS alone, at least not without a mess of nested divs:

  1. Set an element to fill available width or height within its parent container. (This is not the same as width/height:100% if there are other elements in the parent container.)
  2. Align any element top/center/bottom, left/center/right within any container, even if its size is unknown.
  3. Pad an element of unknown size, without increasing that elements size (For example, if a div is set to 100% of the window size, it cannot be padded without overflowing the window.)
  4. Automatically set all elements within a parent element to be equally spaced apart.
  5. Set the height of a floating element. Similarly, independently set shrink-wrapping behavior horizontally and vertically.
  6. Set elements to float in columns rather than rows (CSS3 seems to support columns but browser compatibility is not good)

Nonetheless, I'm sure this is considered blasphemous. So, what are the potential problems with using this system to layout web pages?

EDIT: the code is on github

4

4 回答 4

4

从本质上讲，您正在尝试以一种您认为比 CSS 做得更好的方式重写 CSS。这可能很好——也许它对你有用——但你会面临限制。

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

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

如果您希望从其他人那里获得帮助（例如在 stackoverflow 上），您将无法获得帮助，因为其他人都使用 CSS。但是，如果您对 CSS 有疑问，我们将能够提供帮助。

这就是为什么它可能被认为是“亵渎神明”的原因。我确定您写这个问题的目的是为了收到有关该方法潜在技术问题的反馈，但我认为政治/社区问题同样重要。

于 2013-06-20T19:14:59.227 回答
3

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

这是2013 年 1 月对这些提案的概述，是2011 年概述的后续。

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

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

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

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

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

于 2013-06-20T19:54:55.517 回答
1

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

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

然后，回答您的问题：使用 JS 调用进行所有样式设置将比使用 CSS 昂贵得多，因此我强烈怀疑您的解决方案的性能会比一个好的 CSS 或 CSS+JS 解决方案差得多。浏览器有非常优化的代码来执行 CSS 触发的重排，在 JavaScript 中做同样的事情要慢好几倍。使用 JS 进行特定的样式设置，因为 CSS 缺少一个特性，比如像你的例子那样做盒子对齐，通常是必要的，但是每次你运行它时，它都必须在 JS 代码中重新运行完整的算法，而不是使用本机编译器更快的回流库，可用于您想要实现的部分或全部布局。

于 2013-06-20T19:03:50.977 回答
0

我认为这没有问题，除了您必须确保您选择支持的所有浏览器的输出相同。此外，您还必须处理页面上的元素数量是变量的情况，例如照片库或评论页面。我可以从经验告诉你，很多绝对定位的小元素会严重降低页面的性能。当您达到 50-100 个元素时，您会在滚动和调整窗口大小时注意到这一点。相反，做谷歌图片在这种情况下所做的事情；将元素设置为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)
于 2013-06-20T19:09:32.697 回答