Question

这是我的设置：

文件关系

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 - 包含上面导入的名为“动画”的“模块”的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-”（并在相应的html中）命名_animation.scss中的几乎所有选择器

.animation-wrap {}

.animation-example-selector {}

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

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

对于这个冗长的问题，很抱歉，言辞尴尬。非常感谢任何有关最佳实践的其他建议或知识

Answer 1

抱歉这个糟糕的问题。对于类似的问题，This是一个措辞更好的问题。

我决定使用SASS 3.3＆＃39;＆＃39;＆＃39;＆＃39;灵活地命名 _animation.scss 中的选择器，如此

.module-animation { 
        &-animation-wrap {

        }
}

这样可以保持html干净，封装模块，并且不会使用长前缀混乱css。

SASS + SMACSS正确封装模块

1 个答案: