0

我真的很喜欢 smacss.com/book/categorizing 的模块化架构。但在实际项目中,我偶然发现了简单的案例(正如我所想的那样)。

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

根据

布局

模块

状态

主题

2)在文件夹模块中,我制作了一个具有基本模态窗口样式的文件,如下所示:

根据

布局

模块/modal/modal.css

状态

主题

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

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

模块/modal/modal.css

模块/确认/确认.css

模块/产品/product.css

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

基础/确认.css

基础/product.css

模块/modal/modal.css

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

4

1 回答 1

3

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

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

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

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

模块是页面的一个更离散的组件。这是页面的核心。模块位于布局组件内。模块有时也可以位于其他模块中。每个模块都应设计为作为独立组件存在。

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

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

状态是增强和覆盖所有其他样式的东西。例如,手风琴部分可能处于折叠或展开状态。消息可能处于成功或错误状态。

我强烈推荐你,再读一遍 SMACCS 的书或网站,看看 Youtube 上的Jonathan Snook研讨会之一。它将帮助您了解更多并做出更好的决定。

于 2016-10-25T03:03:16.407 回答