Understanding SMACSS file structure for subthemes

It's up to you how to organize your scss/css, and while you could add to any of the stylesheets based on their purposes (layout, components, mixins, etc), I like to add another partial for site specific styles. As to your specific question of where you would add to an existing stylesheet, that would be determined by the cascade and organizational factors.

Changing to the new SMACSS ideology is great. But if you have already created your theme you are not required to change all your CSS to fit that mold.

If you simply wish to upgrade your existing subtheme to 5.4 is not as bad as it sounds. Upgrading is mostly just changing the names of things.

Of course, read this: https://drupal.org/node/1588228 you probably already did. And read all the readme.txt files like you already did ;-)

After you read all that and have copied the new theme in... you just rename a few files and references from your old subtheme and copy them into the new subtheme... for example... when I upgraded from 5.2 to 5.4 these were some of the steps I followed for MY upgrade:

_custom.scss becomes _mixins.scss

_base.scss becomes _init.scss

Open your new _init.scss and change the last line of code from "custom" to "mixins"

Open all your scss files and change the first line of code from "_base.scss" to "_init.scss"

Change the name of _responsive-sidebars.scss to _resonsive.scss

In the new Zen 5.4 there is a styles.css file where you import your stylesheets now. For example MY styles.css file looks like this:

/* HTML element (SMACSS base) rules */
@import "normalize.css";
@import "wireframes.css";
@import "editor.css";
@import "tabs.css";
@import "pages.css";
@import "blocks.css";
@import "navigation.css";
@import "views-styles.css";
@import "nodes.css";
@import "comments.css";
@import "forms.css";
@import "fields.css";

/* Layout rules */
@import "layouts/responsive.css";

/* Component (SMACSS module) rules */
@import "components/misc.css";
/* Optionally, add your own components here. */
@import "print.css";

Open the .info file in your subtheme and remove references to all those stylesheets that you just put into styles.css. (it makes your .info file look much neater!) Then add just one line:

; Then we add our own stylesheets.
stylesheets[all][] = css/styles.css

Make sure your SASS files compiled without any errors.

Then try it!

Check your console to see if you have any errors or missed any files.

Don't forget to read the readme.txt files that our theme creators lovingly maintain!

Hopefully that helps. :-)

Jump in people if I missed a step!

I found this issue really helpful in understanding SMACSS file organization: #998526: Simplify stylesheet organization using SMACSS categories.

Fantastic documentation by maintainers showing the process of this organization change and various iterations (with pictures!).

In addition, of course to http://smacss.com.