SASS + SMACSS正确封装模块

Question

设置如下:

<<p> 文件关系/strong>

home.php <---styles---- _layout.scss
   |
imports
   |
   v
animation.html <---styles---- _animation.scss

home.php -用于勾勒主页"布局"HTML的文件:

<div id="animation">
    <div class="site-container">
        <div class="animation-container">
            <?php include 'animation.html'; ?>
        </div>
    </div>
</div>

_layout。scss -用于样式化home.php的非导入内容的文件:

#animation {
    //styles <div id="animation">
}
    .site-container {margin: 0 auto; max-width: 980px;}
        .animation-container {
            //styles <div class="animation-container">
        }

animation.html -包含上面导入的名为"animation"的"模块"的html。

<div class="animation-wrap">
    <div class="example-selector"></div>
    //more html for animation module
</div>

_animation。scss -在animation.html

中设置html样式

问题:我应该如何封装_animation.scss中的选择器?

1)。我可以在_animation中嵌套所有的选择器。SCSS如下:

.animation-wrap {
    .example-selector {
    }
    //all other selectors are nested here using SASS, thus they will not affect
    //elements outside of the animation-wrap
}

2)。我可以在_animation中命名几乎所有的选择器。SCSS添加前缀"animation-"(并在相应的html中)

.animation-wrap {}
.animation-example-selector {}

3)。可以使用子选择器来减少级联，但我怀疑这是最好的，它有较差的IE支持

4)。子类化?但是，我认为这是更相关的移动模块到其他地方，而不是封装它，以确保它不会泄漏到其他模块/布局代码

很抱歉，这个问题太啰嗦了，很难用语言表达出来。如有任何其他建议或最佳实践知识，我们将不胜感激

Answer 1

不好意思，这个问题太差了。对于类似的问题，这是一个更好的问题。

我决定使用SASS 3.3全新的'&'灵活性来命名_animation中的选择器。scss like so

.module-animation { 
        &-animation-wrap {
        }
}

这样可以保持html的整洁，封装模块，并且不会用长前缀混淆css。