How to structure all project styles by smacss methodology?

Question

I really liked modular architecture by smacss.com/book/categorizing. But in real project I stumbled on simple case (as I thought).

ok, what I got: 1) I created a folder structure for my css-files by smacss:

Base

Layout

Module

State

Theme

2) In folder Module I've made a file with base modal windows styles, like this:

Base

Layout

Module/modal/modal.css

State

Theme

3) But I have a few types of modal windows with common styles (which I separated in modal.css - colors, borders, positions etc), but they have their own parameters. First window is very simple with two buttons, second has a lot of different content.

Question is: where should I put styles for these two windows? a) Create folders for them as modules:

Module/modal/modal.css

Module/confirm/confirm.css

Module/product/product.css

b) or create for each css-file and put them in Base folder?

Base/confirm.css

Base/product.css

Module/modal/modal.css

I would be glad to get any advice. thank you

Answer 1

the main reason to use SMACCS is to organize your CSS files, therefore, there are a lot of approaches which totally depends on your project.

According to the author, as long as you keep the concept of SMACSS in your mind, you then are able to modify your project as you wish. So, what I recommend you is to have a look at your project and check your folders and files and just do whatever it makes sense more not only for you but also for other developers in the team or in the future while reading your code.

There are only two main goals that you should bear in mind:

A Base rule is applied to an element using an element selector, a descendent selector, or a child selector, along with any pseudo-classes. It doesn’t include any class or ID selectors. It is defining the default styling for how that element should look in all occurrences on the page.

and

a Module is a more discrete component of the page. This is the meat of the page. Modules sit inside Layout components. Modules can sometimes sit within other Modules, too. Each Module should be designed to exist as a standalone component.

so, with this clear definition, you know now that if your rules should be standalone put them under the Module, however, if they are going to work as default to the elements so put them under the Base. In contrast, to me Product or Modal all can be Module and they are not Base as base are clearly stated as default element rules like I said on top.

I am just concern that you have written CONFIRM which looks like a State rules and I assume it can be placed under State folder.

A state is something that augments and overrides all other styles. For example, an accordion section may be in a collapsed or expanded state. A message may be in a success or error state.

I strongly recommend you, read SMACCS book or website one more time and have a look at one of the Jonathan Snook workshop that can be found on Youtube. It will help you to understand more and make a better decision.