问题标签 [smacss]

我正在学习 smacss.com。乔纳森·斯努克 (Jonathan Snook) 在他的书中指出 (P. 14)

不必使用具有布局样式的元素选择器。

我在网上找不到他的声明：http: //smacss.com/book/type-layout

今天在 HTML5 中，我使用<header> <nav> <article> <footer>, ..... 而不是#header #nav #article #footer, .....

现在我很困惑。为什么我不应该使用带有布局样式的元素选择器？还是这些信息已经过时了？

有很多 CSS 的模块化解决方案。我在主题中列出了一些，但可能已经有更多了。您如何选择哪一个用于您的新项目？有比较吗？

我正在研究 CSS 最佳实践和方法，如 OOCSS 和 SMACSS，以便在使用 Twitter Boostrap 3 和 LESS 的中等规模项目中使用。我开始掌握这些方法，但我很难找出如何处理响应式设计和 CSS 模块的关系。

例如，假设我有一个按钮模块，其中包含项目中使用的所有不同类型的按钮（颜色、形状、大小）。如何根据设备更改按钮。相同的按钮在移动设备中应该很大，在桌面中应该是正常的。在 OOCSS 之后，我应该有 2 个皮肤类，例如 btn--default 和 btn--large。但由于每个设备的 HTML 都是相同的，我无法在 HTML 中切换此类。此外，在模块的 CSS 中使用媒体查询会根据设备大小更改按钮的大小似乎不是一个好主意，因为我会将模块与这个特定需求结合起来（如果我想要一个普通按钮怎么办？稍后移动？）。

作为另一个示例，我有具有不同可能布局（垂直/水平）的产品部分模块。如果我想在桌面使用垂直布局而在移动设备中使用水平布局怎么办？我面临着完全相同的问题。我可以轻松创建 2 个不同的子模块（product--horiz、product-vert），但我无法更改它们。

我可以使用 javascript 来切换类，但感觉不对，并且会在禁用 JS 的情况下破坏设计。你可以告诉我，如果一个元素从一个设备到另一个设备发生如此大的变化，那么设计可能是不正确的，但限制这种情况将是一个真正的限制。

那么你对这个问题有什么看法。是否有任何普遍的做法来面对它？

我是新手SMACSS。我正在使用 sass，我想css使用SMACSS. 我对将文件放在哪里有点困惑。我的shadowbox.css意思是在 BASE 或其他地方。我阅读了文档，但仍然很混乱。请支持。谢谢。

如果您有一个模块需要根据布局的哪个部分对每个实例进行细微更改，您如何使用 SMACSS 处理？

正如我所看到的，我有两个选择，而且看起来都不对。

1. 创建子模块/修改器
   • 我看到的问题是这个子模块只会被使用一次，并且随着项目的增长这些将开始建立。
2. 将模块类嵌套在布局类中
   • 问题：通过将模块样式放入布局类中，增加了特异性，使代码有点脏，反之亦然。

我在 SMACSS 上找到的大部分信息都是基于过于简化的情况，所以一旦你接触到实际代码，它就没有多大帮助了。

这是一个具体的例子：

我有一个用于水平布局导航的模块.nav和子类。当它变得太小时需要切换到切换导航（单击按钮时幻灯片打开）。这是由媒体查询控制的。但这里的问题是正确的断点将取决于它的父容器的大小。因此，媒体查询的断点很可能对于每个实例都不同。.nav-hor.nav-hor

我在编写 CSS 时开始遵循 SMACSS 原则。读了两遍这本书，我认为我对理论有了很好的把握，但现在我在将其应用于实际工作时遇到了一些问题。

在我的基本文件夹中，我有 normalize.css 和自定义 CSS 重置，对于某些部分覆盖，对于其他部分扩展规范化。

现在我创建了一个从列表中删除所有填充和列表样式的类。所以这个类依赖于之前定义的样式，但对我来说既不是状态也不是模块。

我在哪里上这样的课？

在我的 CSS 文件中，作为“重置”的一部分，我将所有链接的样式设置为：

我知道这些是针对页面上所有链接的非常广泛的规则，但这是它们的默认外观，所以我想这样做应该没问题（甚至需要！）。

现在，我的导航看起来像这样：

使用相应的 CSS：

不幸的是，只有未访问的链接会显示为绿色，已经访问过的链接仍然是紫色的。
我发现添加!important会“解决”问题，但这并不是很干净。

我当然可以

但这似乎有点臃肿——我也需要为其他链接状态这样做。

有什么办法可以解决这个问题，或者这是正常的行为——也许我的模块化 CSS 方法有问题？

我正在重读 smacss（CSS 的可扩展和模块化架构）[ https://smacss.com/]，大部分内容对我来说都很有意义。

主要的事情之一是模块不需要知道任何它的上下文/环境。即：它只是呈现它的内容，但并不关心它是否包含在侧边栏或主要内容区域中。到目前为止，一切都很好。

这是否会扩展到模块不应该自己定义边距但总是让他们的父母（layouts用 smacss 的说法）决定是否/如何设置它们的一般规则？

我刚开始在我的样式表中使用 BEM 和 SMACCS，但在命名 DOM 中深度嵌套的元素时遇到了一些麻烦。比如说我有一个名为.main-container. 嵌套在第一层的main-container是一个额外的 div，按照惯例，它会被命名为.main-container__article。

这就是事情变得混乱的地方。在该文章 div 中，假设我有一个标题，后跟一个具有嵌套跨度标签的段落。我会继续main-container__article这样预科吗？

在命名父/子元素时，兔子洞会走多远？有没有一点你在二级元素处重置并从那里开始？

所以我对 OOCSS 有疑问。它应该更便携，但与我通常做的事情相比，我发现它不那么便携。

我的例子：

我有一个小部件推荐。在主要内容主体（具有白色背景）中，推荐使用黑色字体。但是在页脚（蓝色背景）中，推荐需要白色字体。

在 OOCSS 之前，我会做这样的事情：

使用这种“旧”方法，我可以将我的小部件从内容区域拖到页脚，并且颜色可以简单地工作 - 我不需要更改小部件的 CSS 或 DOM 类。

使用新的 OOCSS/BEM，我不应该将 .testimonial 类耦合到 ID（或位置），而是应该像这样子类化它：

这样做的问题是，我不能再将我的推荐从内容区域拖到页脚而不进入 DOM 并更改推荐小部件上的类 - 它的可移植性较差，因为它需要开发人员的手动干预；而在编辑器可以拖动它并且样式是自动的之前。

我错过了什么吗？那里似乎没有可靠的真实例子？