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
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.
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-leftclass is probably too specific. I would swap this for anAsideclass 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 areAside 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 isleftor not, although you could apply further styling if this is the case. Similarly you List would have a classAside__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 aClass__Metacomponent if the Class component often uses a Meta component, orAside__Metaif 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!