0

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

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

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

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

我现在想在这个元素上添加一个border radiusand 。box shadow

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

第二个问题是：

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

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

第三期：

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

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

    </div>
  </div>

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

4

1 回答 1

2

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

  1. 样式标题框本身（例如，带有一些边距的浮动）。
  2. 如果可以在具有不同布局的外部某处使用标题框，则使用级联将样式添加到其父文件中的标题框。
于 2013-10-27T01:55:43.537 回答