SASS + SMACSS правильно инкапсулирующие модули

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 для "модуля" с именем "animation", импортированного выше

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

_animation.scss - стили html в animation.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, вот так

.module-animation { 
        &-animation-wrap {

        }
}

Это поддерживает чистоту HTML, инкапсулирует модуль и не загромождает CSS длинными префиксами.