Switch to ITCSS & BEMIT

[luboskmetko]

I suggest to switch CSS architecture in our projects to Harry Robert's ITCSS and BEMIT.

• ITCSS was introduced in the Net Magazine in June 2015 - http://www.creativebloq.com/web-design/manage-large-scale-web-projects-new-css-architecture-itcss-41514731
• ITCSS screencast - https://www.youtube.com/watch?v=hz76JIU_xB0
• ITCSS code from the screencast - https://github.com/itcss/itcss-netmag
• another ITCSS project example https://github.com/csswizardry/frcss
• BEMIT - http://csswizardry.com/2015/08/bemit-taking-the-bem-naming-convention-a-step-further/

Also worth to check - https://github.com/inuitcss/getting-started - which is based on ITCSS too (but it doesn't contain any components).

[danekszy]

Hey.
ITCSS seems like an interesting approach and there's def. something to it. I do have some doubts though...

The most worrisome thing to me is the project page and twt account it links to... There isn't much activity nor much documentation to this approach (you basically provided links to all that is out there, unless I'm missing something).
That's something we should definitely consider before choosing this as our default approach, since developer onboarding may be costly and the approach short-lived.

Another thing that struck me while watching screencast is the amount of boilerplate this introduces, while solving rarely appearing problem. I've came to this conclusion when I realized that the first point at which we introduce components (in its generic form) is penultimate level of triangle/abstraction.
For me (having a bit of BEM background) the approach we have now (in generator & in styleguide) worked well, with the only difficulty being the decision if something is page specific or worthy of implementing as it's own variant of a component.
This is also something that Atomic Design tackles, so I'd suggest taking a look at it as a potential solution for larger project complexity.

On a sidebar: I have to confess that ITCSS (& much of it's granularity) reminds me a bit of an outcry after introduction of JSX with React and passing event handlers as props - people were confusing separation of concerns w/ separation of technologies, which led to a plethora of new tools being born. Also I do have to admit I'm in love with component-centric approach (eg. putting component specific vars in component scss) so I'm probably biased here.

Keep in mind that it's just my opinion (and I'm intentionally picky), so we should probably ask people working on larger projects (SPAs etc.) for their opinion...

[luboskmetko]

Thanks, Daniel. I think ITCSS is so simple concept that it doesn't require much documentation but I agree that it's a slight disadvantage that the methodology is not fully 'open source' and the main documentation remains in the net magazine.

Regarding boilerplate, I think it depends on your custom implementation because ITCSS doesn't prescribe that you need to have all layers present (only in what order they should be if they are present). So in minimal setup you can have just components with default elements styling coming from browser but of course this is not very practical - some settings, reset and/or normalize are used almost by everyone.

These are BEMIT advantages in my opinion in the context of our current coding style and XH generator

• BEM notation
• namespacing - http://csswizardry.com/2015/03/more-transparent-ui-code-with-namespaces/
• objects that allow to build a library of reusable components but don't have to be used if not needed
• low-to-high specificity https://jonassebastianohlsson.com/specificity-graph/

Regarding Atomic Design, I've played with that for a while, and unlike ITCSS I find its chemistry analogy quite artificial and hard to follow in practice.