SASS + SMACSS properly encapsulating modules

Question

Here is my setup:

File Relationships

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

home.php - the file used to outline the "layout" HTML for the homepage:

<div id="animation">
    <div class="site-container">

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

    </div>
</div>

_layout.scss - the files used to style the non-imported contents of home.php:

#animation {
    //styles <div id="animation">
}

    .site-container {margin: 0 auto; max-width: 980px;}

        .animation-container {
            //styles <div class="animation-container">
        }

animation.html - contains the html for the "module" called "animation" imported above

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

_animation.scss - styles the html in animation.html

Question: How should I be encapsulating the selectors in _animation.scss?

Possibilities

1.) I could nest all selectors in _animation.scss like so:

.animation-wrap {

    .example-selector {

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

2.) I could namespace almost all selectors in _animation.scss by adding the prefix "animation-" (and in the corresponding html)

.animation-wrap {}

.animation-example-selector {}

3.) Could use child selectors to reduce cascading, but I doubt that's best and it has poor IE support

4.) Subclassing? But, I think that is more relevant to moving the module elsewhere, not encapsulating it to make sure it doesnt leak into other module/layout code

Sorry for the long-winded question, it was awkward to put into words. Any additional advise or knowledge of best practice is greatly appreciated

Unless your question is "how do I get this output", your question is off-topic. http://meta.stackexchange.com/questions/121289/are-questions-about-naming-classes-relevant-on-stack-exchange and http://meta.stackexchange.com/questions/90637/is-it-ok-to-ask-a-question-about-naming-conventions — cimmanon, Mar 13 '14 at 12:17
Where are you using smacss? I don't see any naming conventions even close to smacss in your code. — Lowkase, Mar 13 '14 at 13:17
@Lowkase Maybe I should prefix _layout.scss selectors with '.l-'. Thanks for pointing that out. I am using SMACSS to separate code for the layout (_layout.scss) and modules (the example module given is _animation.scss). SMACSS is, in large, not about naming conventions. While it does contain a few, the focus of SMACSS is modularizing code to make it scalable. Naming conventions are more in the domain of things like BEM. — Kevin, Mar 13 '14 at 19:56

score 1 · Answer 1 · edited May 23 '17 at 12:21

1

Sorry for the poor question. This is a better worded question for a similar problem.

I decided to use SASS 3.3's brand new '&' flexibility to namespace the selectors in _animation.scss like so

.module-animation { 
        &-animation-wrap {

        }
}

This keeps the html clean, encapsulates the module, and doesn't clutter the css with long prefixes.

edited May 23 '17 at 12:21

Community

1
1

answered Mar 13 '14 at 19:33

Kevin

1,195
12
14

SASS + SMACSS properly encapsulating modules

1 Answers1