如何用smacss方法构造所有的项目样式？

Question

我非常喜欢smacss.com/book/分类法的模块化架构。但在实际项目中，我偶然发现了一个简单的案例(正如我所想的)。

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

基座 布局 模块 状态 主题

2)在文件夹模块中，我创建了一个带有基本模式窗口样式的文件，如下所示：

基座 布局 模块/模态/modal.css 状态 主题

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

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

模块/模态/modal.css 模块/确认/确认 模块/产品/产品

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

基准/确认 基础/产品. 模块/模态/modal.css

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

Answer 1

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

根据作者的说法，只要你把SMACSS的概念留在你的脑海中，你就可以随意修改你的项目了。因此，我建议您查看您的项目，检查您的文件夹和文件，并且在阅读您的代码时，做任何对您更有意义的事情，而且对团队中的其他开发人员或将来的其他开发人员来说也是如此。

你应该记住的主要目标只有两个：

使用元素选择器、子代选择器或子选择器以及任何伪类将基本规则应用于元素。它不包括任何类或ID选择器。它正在为该元素在页面上所有出现的情况中的外观定义默认样式。

和

模块是页面中比较独立的组件。这是这一页的主要内容。模块位于布局组件中。模块有时也可以放在其他模块中。每个模块都应该设计成独立的组件。

因此，有了这个明确的定义，您现在就知道了，如果您的规则应该是独立的，那么将它们放在模块下面，但是，如果它们将作为默认元素工作，那么将它们放在Base下面。相反，对我来说，产品或模块都可以是模块，它们不是基本的，而是作为默认的元素规则，就像我在上面说的那样。

我只是担心你已经书面确认，这看起来像一个州的规则，我认为它可以放在国家文件夹下。

国家是一种增强和超越所有其他风格的东西。例如，手风琴部分可能处于崩溃或扩展状态。消息可能处于成功或错误状态。

我强烈推荐你，再读一遍SMACCS的书籍或网站，看看Jonathan 研讨会，它可以在Youtube上找到。它将帮助你理解更多，作出更好的决定。