css - 有没有人将 OOCSS 与另一个网格框架结合起来?

标签 css grid 960.gs oocss cascade-framework

我相信使用 Nicole Sullivan 的 Object-Oriented CSS 的好处哲学/编码方法/等等。特别是,我热衷于在我目前正在构建的站点中使用诸如“media block”之类的原则。

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

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

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

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

最佳答案

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

关于css - 有没有人将 OOCSS 与另一个网格框架结合起来?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5578185/

相关文章:

css - 固定宽度的中间 div 和它两侧的两个 flex 宽度的 div

html - 如何修复菜单在 wordpress 中不居中

grid - 在 Magento 中创建订单项网格

jquery - Bootstrap 在移动设备上加载错误的网格

css - 关于960网格系统框架中text.css的一个问题

CSS 特异性,父容器否决子容器

javascript - html、css 和/或 javascript 中的自定义滚动框

html - 使用 CSS 获取图像时,图像宽度和高度似乎不正确

css - 将页面右上角的搜索菜单移动到左侧(WordPress)

html - 停止图像调整包含 DIV 的大小