css - 模块化 CSS 问题

Question

我正在研究不同的 CSS 模块化方法，并尝试将他们的一些想法实现到一个新元素中。我正在查看的一些是 SMACSS、BEM 和 MVCSS。

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

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

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

我现在想给这个元素添加一个border radius和box shadow。

我应该在哪里放置这些样式，因为它们不适合布局样式表？

第二期是:

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

我需要能够指定图像的宽度，但它在哪里呢？我现在将它作为媒体 block 模块代码的一部分，但这肯定意味着 future 媒体 block 中的所有图像都将是该宽度。似乎图像的宽度需要在其他地方，但我不确定在哪里。我知道我可以向标记中的图像添加类，如“小”、“大”等，但这听起来像是向标记中添加表示性内容，我认为这是我们试图摆脱的东西。

第三期:

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

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

    </div>
  </div>

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

Answer 1

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

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

这意味着在同一个 DOM 节点上有 2 个不同的 block :容器(了解布局)和小部件(使用边框半径和阴影为 block 设置样式) .

2) 您可以为这些图像添加类，使它们成为媒体 block 的元素，然后使用修饰符指定图像类型:

<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>

因此重要的媒体 block 的图像元素可以设置为更大的尺寸。

您也可以使用修饰符来设置 float 方向。

3) 我不确定我是否答对了你的问题，但我认为你有两个选择:

1. 为 title-box 本身设置样式(例如，带有一些边距的 float )。
2. 如果可以在具有不同布局的外部某处使用标题框，则通过层叠将样式添加到其父文件中的标题框。