有人将 OOCSS 与其他网格框架结合起来吗?

发布于 2024-10-30 22:32:54 字数 762 浏览 4 评论 0原文

我相信使用 Nicole Sullivan 的面向对象的 CSS 哲学/编码方法论/其他的好处。特别是,我热衷于使用诸如“媒体块" 在我目前正在构建的网站中。

然而,它捆绑了液体风格的网格系统,我们的设计师目前正在构建严格的960网格宽度系统。 960 网格系统使用固定的 12 或 16 列布局,每列由 40 或 60 像素组成。 OOCSS 将布局分为 1/2、1/3、1/4 或 1/5 部分的流体分区。

960.gs 在列之间内置了固有的“装订线”边距,每列 10 像素。 OOCSS 的列之间没有边距,因为它们可以是任意宽度,而是在内容元素之间提供边距以分隔内容和容器。

将这两个框架中最好的部分混合并匹配到我们公司的 CSS 样板中是不是一个坏主意? OOCSS 网格框架的流动性是否使其不太适合严格的 960 页面宽度?我们也使用 HTML5 样板。

我问这个问题是因为我已经发现,当尝试将某些框架与 OOCSS(例如 SASS)合并时,两种方法可以彼此正交,最好只选择一种并坚持使用 - 但这可能并不总是如此就这样吧。

I'm sold on the benefits of using Nicole Sullivan's Object-Oriented CSS philosophy/coding methodology/whatever. In particular, I'm keen to use principles such as the "media block" in the sites I'm building at the moment.

However, it comes bundled with a liquid-style grid system and our designers are currently building to a strict 960 grid width system. The 960 grid system uses a fixed 12 or 16 column layout, each consisting of either 40 or 60 pixels. OOCSS seperates a layout into fluid divisions of 1/2, 1/3, 1/4 or 1/5 portions.

960.gs has inherent "gutter" margins built in between columns at 10px each. OOCSS has no margins between columns as they can be any width and instead the margins are provided between content elements so as to seperate content and container.

Is it a bad idea to mix and match the best of both these 2 frameworks into our company CSS boilerplate? Does the fluid nature of the OOCSS grid framework make it poorly suited to a rigid 960 page width? We're using the HTML5 boilerplate as well.

I'm asking this as I have already found that when trying to incorporate certain frameworks with OOCSS (such as SASS) that two approaches can be orthagonal toward each other and it's better to just pick one and stick with it - but this may not always be the case.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

痴意少年 2024-11-06 22:32:54

网格系统的主要优点是它为您的页面提供了视觉上的统一——整个页面都有一致的划分。我会犹豫是否使用两个不同的网格,因为这意味着您正在处理两组不同的线,从而导致一致性大大降低。此外,如果这些网格系统不是为了相互协作而构建的,那么将它们混合可能会对某些边缘情况(甚至正常情况)产生令人惊讶的效果。您不想在项目工作一个月后遇到这种情况,并且不得不将其中一个撕掉。

The main advantage of a grid system is that it gives a visual unity to your page -- you have consistent divisions throughout. I would hesitate to use two different grids, because that would mean you are working to two different sets of lines, resulting in a far less consistency. Additionally, if these grid systems were not built to work with each other, mixing them might have surprising effects for some edge cases (or even normal cases). You don't want to run into that after a month of working on a project, and have to tear one or the other out.

想你只要分分秒秒 2024-11-06 22:32:54

两个在整个框架中应用 OOCSS 原则的 CSS 框架:

AFAIK,Cascade Framework 是唯一包含 媒体对象实现完全集成到网格中。这使得 Cascade Framework 的网格系统成为所有 CSS 框架中最灵活的网格系统。

其他一些框架正在慢慢采用 OOCSS 概念,通常包括媒体对象作为单独的 UI 元素。例如,查看 Bootstrap 的实现

Two CSS frameworks that apply OOCSS principles throughout the framework :

AFAIK, Cascade Framework is the only CSS framework that includes a media object implementation fully integrated into the grid. That makes Cascade Framework's grid system the most flexible grid system of all CSS frameworks.

Some other frameworks are slowly adopting OOCSS concepts, typically including the media object as a seperate UI element. For example, check out Bootstrap's implementation.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文