Skip to content
loading...
markdown guide
 

Hi

I often use BEM and am aware there are many competing arguments for how best to implement it but heres my two cents.
Your layout-aside-left class is probably too specific. I would swap this for an Aside class that styles what an Aside component looks like. This is your Block. You can them apply a Modifier to this class to make it "left-specific" irregardless of how it looks, so your classes for the main component are Aside Aside--left. This makes your LeftSide component more reusable as you can conditionally apply the left modifier based on props etc.
The children of this component then become your Elements. Therefore your Card classname would be something like Aside__Card, note it doesn't care whether the Aside is left or not, although you could apply further styling if this is the case. Similarly you List would have a class Aside__List. Where you have used Modifiers, i.e. layout-aside-left__name-card--description, these are not exactly modifying anything. Your Meta component is not a modified Card element so the class should not imply this. You may be better off giving this a Class__Meta component if the Class component often uses a Meta component, or Aside__Meta if the context is specific to the parent.

An interesting side note I have observed throughout using BEM with React. If you correctly apply BEM to the Card/List Components then these components have their own self-contained Block, Element & Modifier styles so you know when you render one of these components it will look like a Card/List etc. When these Blocks are rendered as Elements in a higher component such as an Aside, the Element stylings should be specific to that context, i.e. positioning/margins etc. rather than drastically modifying its appearance. This could be done by props being passed to the component to apply modifier classes to the block. This keeps your components and styles nicely self-contained and reusable.

I feel my answer has been a little rambly and stream of conscience so let me know if anything isn't clear. I will probably write up a Gist to demonstrate some of my points

 

Very thanks about your answer. Now I have some trick to do with this and have more knowledge about BEM naming! I will memo that!

 

No problem, if it helps take a look at a rough Gist I just put together gist.github.com/andomain/e8a86f4ea...

Wow, I'm very appreciate that! You make me note that Card is another Component, so I can handle both easily. I think BEM is not only handling css but also make Component look more simply.

It's not necessarily that BEM makes component styling more simple, more that the two complement each other nicely allowing you to separate out reusable component styles.

Ok, I got it! Thanks for your advice!

 

see: css-tricks.com/bem-101/

<!-- parent element with modifier -->
<div class="card card--theme-blue">
 <!-- child element -->
 <div class="card__body"></div>
</div>
 

Thanks for reaching out, now I realize how --modifier works!

Classic DEV Post from Aug 28 '19

How did you feel after your first open source PR?

A thread discussing the sensation of contribution to open-source.

hvu160699 profile image
Interested in front-end! Very love your site!

dev.to has dark mode.

Go to the "misc" section of your settings and select night theme ❤️