Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Aurelian Spodarec
Aurelian Spodarec
10,801 Points

SMACSS States with JavaScript

HI,

With JavaScript, I will make modals, tabs etc..

So for that, I will need JavaScript, which will add or remove or modify classes right.

How should I organize my CSS for JavaScript, and how should I organize Smacss for this ocasion, in terms of folder 'states' ?

Or?

Aurelian Spodarec
Aurelian Spodarec
10,801 Points

I believe the states will also look something like 

is-active-tab 

is-active-modal

is-active-modal--primary

or 

is-active__modal--primary

I don't know lol What do you suggest? Apart from that I'm happy with how I'm doing my CSS now :D just need to add JS to it, which I don't have much experience with .

1 Answer

Tim Knight
Tim Knight
28,888 Points

Personally I put states belonging to a particular module within that module. If there are generic states based on the application then I look at creating a states folder to hold those states.

Also in most cases (in my opinion) a state isn't going to use your full BEM naming convention. So let's say you have your primary modal which is .modal--primary. I see that looking like this:

.modal--primary {
}

.modal--primary.is-active {
}

There are a few alternatives to that syntax that I've seen. So using the -- as a prefix for a class name but keeping it as a separate class, like .--active. So you'd have <div class="modal--primary --active">, not the space before the -- because it's a separate class.

I tend to lean away from using long BEM-style active class names mostly because those are being added by JavaScript I don't want to have to write a ton of JavaScript for each version of the active action and instead can do something like this is jQuery...

$('.whatever').on('click', function() {
  $('.thing-getting-the-class').addClass('--active');
});
Aurelian Spodarec
Aurelian Spodarec
10,801 Points

Thank you :)

I will then create the active rule in the same module, underneeth the CSS of the file, so I know what is CSS and what is for JS, i suppose.

And so while working with JS, is better to use something like is-active, instead of BEM styles.

And then with JS, just write in scripts file the code commenting above what it does //Tabs.

ANd styles folder is for generic states like Navigation collapse?

One more thing, you know the folder structure, I was jsut wondering, how do you organize it?

Atm i keep this like here With assets holding images.

Should I put CSS, JS in assets folder, or?

Tim Knight
Tim Knight
28,888 Points

Personally I see BEM as a methodology for manage styles, JS specific states aren't really the same thing so no I don't put them in BEM styling. I'm guessing too you mean the "styles folder" being used for generic states. What I mean by generics are something that you have in common with multiple modules. For example if your active state is create similar styles for buttons, tabs, and navigation items then you can a separate file for that. Some people just have a single states file where all their states are... and that's fine too. For me, even states related to navigation would be within the navigation module, because that's my preference.

In terms of the folder structure I think your scss folder is fine, but yes I do create an assets folder containing my css, scss, js, and fonts folders. I'll also create an img folder within assets to house any SVGs or other images associated with the layout as a whole (then using an images folder on the root of the site folder for files loaded into the system by a CMS).

Aurelian Spodarec
Aurelian Spodarec
10,801 Points

I quite like my Scss :D and HTML :D I try to change most of it each project I make, and learn more.

So The index.html, should be alone, and there should be folder containing

-assets [css, scss, fonts, img(random images)[svg folder] ].
index.html
blog.html
conact.html

like this?

Tim Knight
Tim Knight
28,888 Points

Like I said, it's going to depend, but yes that's my personal choice.

Aurelian Spodarec
Aurelian Spodarec
10,801 Points

Thank you soo much though! :) I'm starting to like what I'm doing, slowly, it has a lil more colors.