CSS Project Structure

Question

I'm a little bit lost with my CSS project structure.

My project is huge, so after researching, I decided to go with ITCSS Structure, it was all good until I reached ,,Components Layer''

What I did: I broke my components folder into sub-folders as well.

For example: I have a template for my html pages, in the template I have header, content, footer which have general CSS code for them (default state). And I have a sidebar with the same layout but with extra CSS.

Here's a photo of something like my tree

In Components Folder you can see the CSS for every component alone and in Sections Folder you can see CSS for the parent element of the components and common CSS between components.

I don't know whats the best idea to structure it, or if this is good enough for big projects, or if it will slow it down, or or or.

Please give me your ideas and help.

Thank you.

Answer 1

I say it's good enough if it makes sense for your project. There isn't really a definitive answer to your question.

Components layer in ITCSS is often composed of Objects and Components. There could be a bit more general things like Buttons, Header, Footer and etc, but you are also free to group a couple of components, let's say related to the SideBar (like it is for your case). You can group them in a subfolder or simply split them in separate components with a prefix components.sidebar-something.scss. That's all right.

I've been doing similar structure decisions in my latest projects, haven't been slowed down until yet.

As long as you're consistent, I think you're good to go & scale!