Reorganize Sass partials for compliance with ITCSS methodology?

[ninjasort]

I've been building bigger sites pretty frequently with the Bootstrap Sass partials and started to gain some opinions about structuring for scalability. Harry Roberts has a cool concept called "Inverted Triangle CSS" Essentially the concept is around structuring partials in order of specificity and type. Bootstrap currently has a basic implementation of structure, however I strongly think it could be improved using Harry's concept. I've created a repo that utilizes some of the Bootstrap Partials in this manner.

Recently, I've wanted to also have variables closely tied with their components. Rather than going through a monolithic _variables.scss partial, I've wanted to modify all a single component's color, padding, etc in a partial specifically for that component: Ex. _modal-vars.scss, _panel-vars.scss.

I'm curious to gauge the community's stand on this subject and potentially propose a structure that would aim to help the developers improve the speed of customizing and extending Bootstrap following a well architected partial structure. For example, a structure with directories for each component, yet still imported into a _bootstrap.scss partial, but slotted in correctly based on a ITCSS architecture.

I'd love to hear feedback or loop into an open issue on this. Thanks!

[cvrebert]

CC: Chief CSS Architect @mdo

[mdo]

If we were to go down the route of focused variables, they'd probably end up at the top of individual files. That said, it's a rather large departure for us to take under right now and having a single place to go to and edit shared variables makes a ton of sense still.