模块化CSS问题

Question

我正在研究不同的CSS模块化方法，并试图将他们的一些想法实施到一个新的项目中。我正在考虑的一些是SMACSS，BEM和MVCSS。

我知道在SMACSS中，布局规则应该在我的_layout.sass文件中，这很好，所以我的样式如下所示：

.container
  +container
  +margin-leader
  +margin-trailer

+container将此元素设置为Compass Susy中的网格容器，然后添加上边距和下边距。

现在，我想向该元素添加一个border radius和box shadow。

当这些样式不适合布局样式表时，我应该把它们放在哪里？

第二个问题是：

我已经创建了一个媒体块，它基本上允许图像向左浮动，一些文本向右浮动。它有一个翻转的变体，可以将这两个变量翻转过来。

我需要能够指定图像的宽度，但是这样做的目的是什么？我现在已经将它作为媒体块模块代码的一部分，但这肯定意味着未来媒体块中的所有图像都将是该宽度。图像的宽度似乎需要在其他地方，但我只是不确定在哪里。我知道我可以在标记中添加类，比如"small"，"large“等等，但这听起来像是在标记中添加一些表现性的东西，我认为这是我们想要摆脱的东西。

第三期：

我已经创建了一个标题框模块，标记如下：

  <div class="title-box">
    <h3 class="title-box__header">Upcoming Events</h3>
    <div class="title-box__content">

    </div>
  </div>

我要三个这样的盒子并排放在一起。我知道怎么做，但不确定正确的模块化方法。有什么想法吗？

Answer 1

1)根据BEM方法，您可以使用mixes来解决您的第一个问题：

<div class="container widget"></div>

这意味着在同一个DOM-node上有两个不同的块:容器(了解布局)和小部件(使用边界、半径和阴影设置块的样式)。

<div class="media-block">
    <img class="media-block__image"/>
    <div class="media-block__description">Some text</div>
</div>

<div class="media-block media-block_float_left">
    <img class="media-block__image media-block__image_type_important"/>
    <div class="media-block__description">Some text</div>
</div>

因此，媒体块中重要的图像元素可以具有更大的样式。

也可以使用修改器来设置浮动方向。

3)我不确定你的问题是否正确，但我认为你有两个选择：

1. 样式标题框本身(例如，带有一些边距的浮动样式)。如果可以在外部使用不同布局的标题框，
2. 会使用层叠将样式添加到其父文件中的标题框中。