Hello,
I have a question regarding this training.https://www.outsystems.com/training/lesson/2087/front-end-in-outsystems
According to the video we should use BEM to name CSS classes in outsystems. So far, so good, but when analyzing the OutSystems UI CSS, I don't see that they are using this...
For example, according to BEM, in the example of the video (image) we would have:
.card--active
.card--disable
(Did I understand correctly?)
when looking for the active/disabled classes in the outsystems UI I find:
a.active
.flatpickr-disabled (with only one dash)
Sorry, I may be understanding something wrong, but if you can explain it to me.
Would be two dashes
https://css-tricks.com/bem-101/
the __ is for elements inside the block and the -- is for modifiers or some specific action, state or behaviour on the block or element, in this case, the state active and disabled.
ps: I saw the image you shared and the two dashes can be on block or element level and when has just one dash is when the class description has more than 1 word, i.e .magic-card
then imagine the block has one hidden element that comes up when you hover the card or there is something external that makes the hidden element visible
.magic-card__hidden-element
now you want to give the style to show
.magic-card__hidden-element--show
etc etc
Check these two components, they are using BEM convention
https://www.outsystems.com/forge/component-overview/12925/avatar-stack
https://www.outsystems.com/forge/component-overview/11339/card-display-content-hoverable
Kind Regards,
Márcio
https://www.outsystems.com/forums/discussion/70051/css-naming-convention-for-outsystems-ui-core-widget/
I think this link can help and I think it's OutSystems' own convention or even legacy and as Dinis says in the post "It's a modified BEM in a way".
But of course, BEM Convention ftw! :D
OK thank you.
But in a way, I still have doubts then... as the BEM would be:
with two dashes?
This if I wanted to create an active and disable class for the card. Or what would be correct for BEM?
Sorry, but I was a little confused.