Question

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

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

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

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

我现在要为此元素添加border radius和box shadow。

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

第二个问题是：

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

我需要能够指定图像的宽度，但这会在哪里？我现在把它作为媒体块模块代码的一部分，但肯定这意味着未来媒体块中的所有图像都将是那个宽度。看起来图像的宽度需要在其他地方，但我只是不确定在哪里。我知道我可以在标记中添加类，如“小”，“大”等等，但这听起来像是在标记中添加表达性内容，我认为这些内容正在试图摆脱。

第3期：

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

  <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个不同的块：容器（了解布局）和小部件（使用边框半径和阴影设置块的样式）

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

样式标题框本身（例如，带有一些边距的浮动）。
如果可以在不同布局的外面某处使用标题框，则可以使用级联在 title-box 的主文件中添加样式。

模块化CSS问题

1 个答案: