Foundation.mozilla.org: SASS Naming Conventions

[youriwims]

BEM [block-element-modiefier] is a pretty cool naming convention that lets you visualize not only the nesting structure, but also element differentiation via a modular system. Would anyone be interested in possibly considering this methodology as a way of organizing our styles?

cc: @mmmavis, @Pomax

[Pomax]

I gave it a read through, but I'm really not a fan of this syntax. I find it very hard to read and after reading the explanation on the side, don't feel this actually really adds anything that can't be done by instead naming things sensibly and using compound selectors (I strongly prefer a compound .thing.element.modifier over a single .thing--element__modifier).

I'm up for progressively auditing our CSS and renaming things to be more sensible than they currently are, where we can, though.

[youriwims]

With this approach the -- signify a modification to a block or element while the __signify a direct nesting situation between blocks and elements. So, in action, it would be .block__element--modifier or .block--modifier. I think it helps bridge the gap of how organized styles fit into a doc's nesting structure/flow.

However, I'm more than open to other suggestions and don't mind doing some more research in the meantime. Is everyone open to a meeting in the near-future to bring our suggestions together and finding a solution to move forward on this?

[Pomax]

Before we call a meeting to find a solution, let's first establish common knowledge about what the problem is that we're having, for which solutions need to be found? (so we don't all come up with solutions that each address subtly different problems)

[mmmavis]

I'm not a big fan of long classnames and am more in favour of having fewer, shorter classnames. From BEM's site it seems like this methodology is more useful for big, complex projects as it's aim for avoiding CSS inheritance chaos.

Cleaning up Foundation site's branding and styling is on the roadmap so I think once that work is done we should then be able to establish more shared CSS rule sets and classnames. My hope is that we won't have to create too many one-off classnames in the future.

And +1 on

let's first establish common knowledge about what the problem is that we're having, for which solutions need to be found?

[youriwims]

I don't have as much experience with the codebase since I'm newer, but for me, currently, it's just a matter of logic and organization. I usually run into difficulties understanding the reasoning behind the naming and then also how they're organized in the current sass file structures.

But, if the site's branding & styling will clean most of this up, then that works too :+1:

[Pomax]

Could I ask you to keep kind of a "log" of difficulties, so that @mavis and I can experience the pain by proxy, so we can help understand where we really need to improve, and where the improvements can happen as we clean up our css over the natural course of working on issues (including planned future cleanup issues)?

(It's way too easy to get used to a codebase and not see the pain points anymore =D)

[youriwims]

Sure, I'll start doing that :)