Open jschroed91 opened 7 years ago
beckkramer
commented
7 years ago Regarding naming conventions, I'm going to go to bat for BEM. I think it dovetails well with atomic design, it makes it very clear what CSS is responsible for what, and I think it takes the guesswork out of what a class name should be. All of these things are invaluable for team-based CSS creation.
jschroed91
commented
7 years ago @beckkramer I see your point about Option 1 requiring a lot of diligence to identify where patterns should go, and then also causing some confusion when trying to find a pattern... I was originally on board for Option 1 but when considering that, Option 2 might be the way to go.
Here's what I'm trying to accomplish here: 1.) Make it very clear what-goes-where as far as partials are concerned 2.) Create a folder structure that encourages the mindful creation of patterns and their contexts 3.) Create a spot for third party SCSS files (/vendor) as needed (though ideally we should pull them in via npm or yarn if possible)
Current suggestions:
Option 1:
Option 2:
Items marked with a * are optional/may not always be needed. /pages is only needed if you have one-off CSS, which we should try to avoid whenever possible.
Option 1 would require a lot of diligence to identify what kind of pattern is what, and where it should go. While academically I think it's a good idea, it could just lead to things being hard to find.
Option 2 is closest to what I use now. It assumes our CSS is one of four things:
Both options leverage the idea that patterns should be focused and go from a general-to-specific order inside the patterns folder, and that layout/positioning concerns be removed altogether from those elements' files. That is, a form should never care about where/how it's being positioned. We should have other CSS in the layout file(s) that takes care of that.