BEM methodology about kss-node HOT 12 CLOSED

You mix BEM and class helpers.

You should document .text--title as modifier for .text and not in .hero

If .text--title is a .hero__title modifier you should use .hero__title--modifier

<header class="hero">
    <h1 class="hero__title hero__title--modifier">Awesome product #1</h1>
    <span class="hero__description hero__description--modifier">With this product, you will never have to sleep again!</span>
    <div class="card">
        <a href="/buy" class="hero__cta">Buy now</a>
    </div>
</header>

If you have several modifiers for .hero ’s children A kss doc block can be a solution.
But each kss block change only one class as modifier.

from kss-node.

.avatar--news is a bad idea because your component avatar contain rules for a context. So it can't be extracted to be included in an other project without news. Smaller elements should be independent of context.

.news-card__avatar.avatar In BEM, ITCSS and SMACSS this is the good way. Avatar should be an independent element reusable whatever the context.
But in .news-card there is that .news-card__avatar is an .avatar with some position and size rules (if they are rules not used for positioning and sizing, it should be a modifier of avatar).

.news component should be declared after .avatar to not have a correct cascade order.

1. element (atom) : smaller and indivisible element
2. component (molecule) : can contain son elements and modify positioning/sizing by context

I hope it's helping ^^

from kss-node.

Hey @johannestroeger! Sorry, I only just saw your tweet today. You should be able to handle this using a custom template - even just copying the existing template and removing these lines should suffice :)

from kss-node.

yes! already did that, almost this way.

from kss-node.

@johannestroeger way too late to the party here but how have you managed to implement BEM modifiers and states with KSS?

from kss-node.

@rafaelrinaldi somehow it works, but it's not really flexible:

button.scss:

...
// .m-btn--huge                - Huge Button
// .m-btn--large               - Large Button
// .m-btn--small               - Small Button
// .m-btn--tiny                - Tiny Button
...

button.hbs

<a href="#" class="m-btn {{modifier_class}}">Link Button</a>

<button class="m-btn {{modifier_class}}">Button Element</button>

from kss-node.

@johannestroeger The only problem with that is that the markup section gets messed up. This is the output that I get after compiling:

<a href="#" class="m-btn [modifier class]">Link Button</a>
<button class="m-btn [modifier class]">Button Element</button>

Where I expected something like:

<a href="#" class="m-btn m-btn--huge">Link Button</a>
<button class="m-btn m-btn--small">Button Element</button>

Am I missing something?

from kss-node.

@johannestroeger Actually, forget about it. I was probably trying to do something that KSS doesn't really supports. Instead now I'm documenting modifiers as different "scopes". It works.

Thanks!

from kss-node.

I wonder how you document block elements (hero__title, hero__description) are they their own documentation sections?

from kss-node.

@MartinMuzatko i would you recommend not to nest elements; do not represent structure (e.g. html) with BEM.

from kss-node.

This is interesting @johannestroeger. Do you only use modifiers and not nested elements? AFAIK having a second level is fine, no matter where it is in the structure. I have individual classes for the description and title. so it could look like this:

<header class="hero">
    <h1 class="hero__title text--title">Awesome product #1</h1>
    <span class="hero__description text--description">With this product, you will never have to sleep again!</span>
    <div class="card">
        <a href="/buy" class="hero__cta">Buy now</a>
    </div>
</header>

Because I want to use e.g. the css of the components text--title, but style it in the context of hero. Which is why hero is having sub-elements like hero__title. What is your approach with this? Or didn't I understand BEM completely ? ;)

from kss-node.

Interesting. I was trying to showcase the problem of mixing components. I hope I'm not drifting into too much offtopic for this issue.
My real life example looks like this.
news-card contains an avatar. both of them are components that work in isolation.
So what should I do, if I want to style the avatar in the context of the news-card? do I add a modifier for the avatar (avatar--news), or do I add an element to news-card (news-card__avatar)?

Thank you a lot for pointing out how it is actually done. This really helps to document my components better using KSS :)

from kss-node.