Folder structure of a SMACSS project – Where to put class?

Question

I am starting to follow the SMACSS principle when writing CSS. Having read the book twice, I think I got a good grip on the theory, but now I've got some problems putting that to actual work.

In my base folder, I've got normalize.css together with a custom CSS reset, that for some parts overwrites, for other parts extends normalize.

Now I've created a class that removes all padding & list-style from a list. So that class depends on the styling defined previously, but is neither state or module to me.

Where do I put in such a class?

Answer 1

If this modification should be applied as default for all lists (like reset) - you need to put it to BASE.

If this modification is only for some special pages, then use THEME.

In other cases it should be placed into MODULE, as some base class like .m-list or sub-class .m-list-plain

Answer 2

As said by Evgeniy this should be in base in case you want to use it as default.

But another concern: If you don’t fetch normalize.css via bower or npm or git, you should best modify the css there to fit to your styling instead of overwriting rules later on. This saves you filesize and also keeps specifity low and under control.

If you fetch it with a package manager there’s still some post processor like uncss which can remove the duplicated rules in a post processing step. It can be a bit tricky to configure but works pretty well and can save a lot of bytes.