css - 如何通过 smacss 方法构建所有元素样式？

Question

我非常喜欢 smacss.com/book/categorizing 的模块化架构。但在实际元素中，我偶然发现了简单的案例(如我所想)。

好的，我得到了什么:1) 我通过 smacss 为我的 css 文件创建了一个文件夹结构:

Base

Layout

Module

State

Theme

2) 在文件夹 Module 中，我创建了一个具有基本模态窗口样式的文件，如下所示:

Base

Layout

Module/modal/modal.css

State

Theme

3) 但我有几种具有通用样式的模态窗口(我在 modal.css 中将它们分开——颜色、边框、位置等)，但它们有自己的参数。第一个窗口非常简单，只有两个按钮，第二个窗口有很多不同的内容。

问题是:我应该把这两个窗口的样式放在哪里？a) 为它们创建文件夹作为模块:

Module/modal/modal.css

Module/confirm/confirm.css

Module/product/product.css

b) 或者为每个 css 文件创建并将它们放在 Base 文件夹中？

Base/confirm.css

Base/product.css

Module/modal/modal.css

我很乐意得到任何建议。谢谢

Answer 1

使用 SMACCS 的主要原因是组织您的 CSS 文件，因此，有很多方法完全取决于您的元素。

按照作者的说法，只要你牢记SMACSS的概念，你就可以随心所欲地修改你的元素。因此，我建议您查看您的元素并检查您的文件夹和文件，只做任何对您以及团队中的其他开发人员或将来在阅读您的代码时更有意义的事情。

您应该牢记两个主要目标:

A Base rule is applied to an element using an element selector, a descendent selector, or a child selector, along with any pseudo-classes. It doesn’t include any class or ID selectors. It is defining the default styling for how that element should look in all occurrences on the page.

和

a Module is a more discrete component of the page. This is the meat of the page. Modules sit inside Layout components. Modules can sometimes sit within other Modules, too. Each Module should be designed to exist as a standalone component.

因此，通过这个明确的定义，您现在知道如果您的规则应该是独立的，则将它们放在模块下，但是，如果它们将作为元素的默认值工作，那么将它们放在基础下。相比之下，对我来说，Product 或 Modal 都可以是 Module，它们不是 Base，因为 base 已明确说明为默认元素规则，就像我在上面所说的那样。

我只是担心你写的 CONFIRM 看起来像州规则，我认为它可以放在州文件夹下。

A state is something that augments and overrides all other styles. For example, an accordion section may be in a collapsed or expanded state. A message may be in a success or error state.

我强烈建议您再读一遍 SMACCS 的书或网站，并看一看可以在 Youtube 上找到的 Jonathan Snook 研讨会之一。它将帮助您了解更多并做出更好的决定。