问题标签 [oocss]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
3 回答
1956 浏览

html - 元素可以在 bem 中包含块吗

有人告诉我,我写下面的代码是错误的。我想元素不能包含块及其坏bem

我想过这样写,但它也没有显示层次结构。

这是另一种方式,但对我来说它似乎比上面的例子更糟糕。

我最初编码的方式是错误的吗?如果是这样,为什么,最好的选择是什么。

0 投票
1 回答
186 浏览

css - 需要帮助了解我应该如何定义 oocss 对象和皮肤

在我问这个问题之前,这是我所指的代码:

盒子对象

用于在 Bootstrap 中将内容框起来,例如岛屿或小岛。

圆形皮肤

制作圆角。它被几个抽象类使用,例如box。

在对抽象进行蒙皮的代码中,您将编写:

我还有其他扩展框的皮肤,例如灰色、警报和标签。


现在的问题

我正在研究一个按钮对象。但是既然它和box有同样的规则和修饰符,并且可以有同样的round修饰符,我应该把它声明为一个皮肤吗?所有按钮所做的都是为“外观”添加大约四个规则如果它与边距或填充混淆,我会说它应该是一个对象。

在你会写的代码中

或将其调整为更小

保持这种干燥过度吗?让我担心的是按钮是页面上如此常见的元素 - 但实际上它只是扩展了一个对象和我已经编写的修饰符。

0 投票
1 回答
507 浏览

css - OOCSS 最后一个网格元素是如何工作的

所以在OOCSS上,他们概述了他们的网格版本。我不明白到底发生了什么。我知道它应该解释导致最后一个元素落到下一行的流体布局的舍入误差。每条规则对此有何帮助?

我的 OOCSS last-child 伪选择器的 scss 版本:

0 投票
1 回答
73 浏览

css - 隐藏内容但响应 :hover

我正在研究一种纯粹的 oocss 方法来创建 Windows 8 中的魅力。我已经完成了 Dock 类,但是在弄清楚当鼠标移到停靠区域时如何“扩展”魅力时遇到了问题。我知道有一些方法可以隐藏内容,但让浏览器响应 Charm 的 :hover 事件。如果您有任何想法,请告诉我。

码头

将内容停靠到屏幕边缘。

魅力

包含内容的岛。

html

我尝试填充它并将宽度设置为 1px 但没有运气。在我最初的计划中,当移动移到它上面时,我会应用背景颜色,这样它就不会在屏幕的一侧呈现一条线。

这和我得到的一样接近,但它很丑:

0 投票
2 回答
128 浏览

html - 高效的 CSS :在大多数情况下为链接设计样式,避免覆盖

我经常遇到以下问题:

我有类似于以下内容的标记:

大规模想象一下,通常有许多不同的导航项、段落和高级内容。

我试图遵循 OOCSS 和模块化 CSS 原则,避免基于位置的样式,但在许多情况下,CMS 不够灵活,无法在任何地方添加类。

因此,为了在 main-content 中设置所有链接的样式,我最终会这样做:

但不知何故,我所有的链接left-column最终都带有边界。然后我必须去重写:

这是混乱的开始。对于您所做的每一项更改,a您都必须为所有“例外”添加重置样式。

然后我尝试

但这更糟。为什么?因为 id 是一个强大的选择器,它会覆盖 #main-content 中通常不应该应用边框的链接。

有什么建议可以在不重置的情况下进行有效的链接样式设置吗?如果 CSS "Scope" 还不是候选发布模块,CSS 原生提供了哪些工具来解决这个问题?例如,规则的出现顺序会有所帮助吗?

0 投票
2 回答
34751 浏览

css - 如何从另一个 sass 文件@extend,或者如何实现 OOSAS?

我的问题实际上比标题所说的要广泛。这只是我的想法遇到障碍的地方,但我对各种解决方案持开放态度。让我解释一下我的总体目标。

我喜欢 CSS 预处理器可以做的事情。我喜欢 OOCSS 和 SMACSS 的想法。我对这一切都很陌生。我正在尝试升级我的设计方法,以某种方式融合世界上最好的东西。我有一个这样的理论方法:

  • 仅使用语义类名称或 id 或其他
  • 在一些常见的样式表中定义模块或模式
  • 具有每页样式表,将模块从通用样式表@extend 到与给定页面相关的语义选择器上

所以这:

加上这个:

变成这样:

我不一定见过其他人这样做,但对我来说这似乎是个好主意。我在我的宏伟计划中遇到的问题是 @extend 似乎不适用于导入的文件。SO上其他地方的人说这是不可能的。这是真的?我让 mixins 工作,但它们的问题是它们复制了输出 css 中的每个属性,这似乎并不理想。

我实际上更偏爱 LESS(语法),但目前甚至没有扩展。我不应该担心 mixins 的效率低下,还是有什么方法可以实现我的要求?

注意: 我正在使用 Prepros 工具自动编译我的 sass。当我尝试编译上述代码时,出现类似错误。

... \sass\home.scss 的第 11 行警告:“#intro”未能@extend “ruddy”。未找到选择器“ruddy”。

如果我只是将 module.scss 中的代码复制到 homepage.scss 中,那么问题就会消失。

0 投票
1 回答
332 浏览

css - 三层OOCSS架构

我正在寻求有关遵循 OOCSS 原则(inuit.css、smacss 等)的三层样式指南的结构/架构的讨论。如果您熟悉 inuit.css,您就会知道该框架是为两层构建的。底层(基础)将代表 inuit.css 的核心。基本上不应该改变的对象和抽象。第二层包括对基础层的扩展,即特定于手头应用程序的皮肤和主题。Nicole Sullivan 在 OOCSS 中传达了将基础对象与蒙皮/主题分离的相同基本原理。话虽如此,我正在寻找有关三种布局方案的讨论。第一层代表基础对象。第二层代表局部级别的基础对象的皮肤/主题/扩展。

假设有一家公司有 50 种不同的应用程序。我需要所有 50 个应用程序来继承全局样式指南。其次,假设 50 个应用程序中的 25 个需要统一并继承相同的样式指南。这将是地方层面。最后,25 个应用程序中的每一个都可能具有覆盖本地和全局指南所需的特定主题。我还应该提到,SASS 预处理器应该包含在架构中。每个进程级别应该能够覆盖先前建立的变量(例如:全局分配变量 base-font-size 变量为 16px。本地应用程序将 base-font-size 覆盖为 15px。本地应用程序之一将本地级别覆盖为 base-font - 大小为 12 像素。

很想知道人们将如何格式化目录结构,我期待着回复!

0 投票
2 回答
56 浏览

css - 遇到文本溢出和溢出问题:隐藏工作

我在让文本溢出工作时遇到问题。我也无法正常溢出:隐藏工作。有什么想法或建议吗?

这是没有任何一个的css代码。(请注意它是用 OOCSS / BEM 语法编写的)。

和 HTML

我还尝试将它包装在父 div 中并将 text-overflow / overflow 应用于那个......没有运气。

0 投票
1 回答
182 浏览

css - OOCSS 使用 SASS 和参考

通常我在我的项目中使用LESS,但现在我尝试使用SASS

在 LESS 我做这样的事情

并且输出 CSS 将是

在 SASS 中不起作用,在 SASS 中有什么方法可以做到吗?

0 投票
1 回答
299 浏览

css - BEM:块中的独立块

例如,我有一个名为:

这个块恰好位于标题中,但也可以在任何地方。现在,如果它在标题中,它需要向左浮动并且还有一个边框。如果是这样,这是正确的做法吗:

或根据 BEM:

两者哪个更好?