模块化CSS问题

我正在研究不同的CSS方法，并试图将他们的一些想法应用到一个新项目中。我看到的一些是

smass

，

BEM

和

MVCSS

我知道在

smass

中，布局规则应该在我的

\u layout.sass

文件中，这很好，因此我的样式如下：

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

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

    </div>
  </div>

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

现在我想向这个元素添加一个

边界半径

和

框阴影

由于这些样式不适合布局样式表，我应该将它们放在哪里

第二期是：

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

我需要能够指定图像的宽度，但这是怎么回事？我现在已经把它作为媒体块模块代码的一部分，但这肯定意味着未来媒体块中的所有图像都将是该宽度。看起来图像的宽度需要在别处，但我不确定在哪里。我知道我可以向标记中的图像添加类，如“小”、“大”等，但这听起来像是向标记中添加了表示性的东西，我认为这是我们试图摆脱的东西

第3期：

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

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

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

    </div>
  </div>

即将举行的活动

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

1）根据BEM方法，您可以使用混合解决您的第一个问题：

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

这意味着在同一DOM节点上有两个不同的块：容器（了解布局）和小部件（使用边界半径和阴影设置块样式）

2） 您可以向这些图像添加类，使其成为媒体块的元素，然后使用修改器指定图像类型：

<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） 我不确定你的问题是否正确，但我认为你有两个选择：

样式标题框本身（例如，带有一些边距的浮动）

如果可以在外部某个地方使用不同布局的标题框，则可以通过级联将样式添加到其父文件中的标题框