Creating Scalable Websites: BEM, Interactions, Bricks & ACSS

Subscribe to the channel → lm.fm/subscribe
In this video, I walk you through how I rebuild a section on our site.
I'll be using the Bricks Builder, ACSS, BEM, and interactions.
ACSS: lm.fm/C4VQ6gN
Bricks Hub → brickshub.io
Hire us → www.weblime.com
No-code site builder and link shortener → limey.io
My Limey site → limey.io/edanbenatar
Give this video a big thumbs up if you find it helpful, and don't forget to hit the subscribe button and the notification bell 🔔 to stay updated on my latest videos.
Thank you for watching, and happy building! 💚

[@edanbenatar]

I hope this helped you better understand how to use ACSS, BEM, and Interactions.
*Subscribe to my channel* → lm.fm/subscribe
*Get ACSS* → lm.fm/C4VQ6gN
*Build beautiful one-page sites with Limey for FREE* → limey.io/
*Watch this next* ➝ Proven Strategies To Land More Clients & Transform Your Business: ruclips.net/video/UWQ6lDzn6uA/видео.html
Be sure to hit the like button on the video if you got value from it.
Please let me know in the comments below if you have any questions or want to see me covering a specific topic.

[@NorthTonawanda1]

Great job! Look forward to more.

[@edanbenatar]

Thank you! Already in the works :)

[@badid0y]

Great video and straight to the point. Hoping for more bricks features and acss tutorials.

[@edanbenatar]

Thanks for the support! :)

[@rubengarciajr]

dope video, when i first started with ACSS, i added tons of utility classes .. then i realized the benefit of BEM!!!

[@edanbenatar]

Once it clicks you can never go back! 😅

[@EduwareIzekor]

Very nice video Edan. When building I try to avoid styling the ID. In this case you could have adjust the margin's of the 2nd and 3rd card by using the nth-child pseudo class. It's makes it easier to manage without having to go to each card individually. Good work nonetheless!

[@edanbenatar]

Great tip! Would you recommend putting it on the section or container level? For now, I added I applied it from the section.
For anyone seeing this comment, here's the code to avoid touching the ID altogether.
%root%__unleash-card {
&:nth-child(1) {
background-color: #fee2e2;
}
&:nth-child(2) {
background-color: #ecfccb;
}
&:nth-child(3) {
background-color: #fef9c3;
}
}

[@EduwareIzekor]

@@edanbenatar I always put it on the card

[@AdhamMaher]

Please I don't understand why the align-self to the left made all blocks height the same?

How come you are not using the right click for Colors or variables? Or have you not activated that setting? Anyway. Very nice approach. 👌