Please help me with the correct approach of using Bricks components vs BEM.
I’m setting up an ecomm site and I really don’t want to mess it up from the get go.
Let’s say I have custom list element:
<ul>
<li><svg><p>some text</p></li>
<li><svg><p>some text</p></li>
</ul>
(I have a plethora of different elements like this)
I have 2 modifiers one for color (primary, secondary, accent) and one for size (s,m).
Color affects svg bullet color and the size modifier affects list gap, font size and bullet size.
What approach is better:
a.) BEM everything and style everything with CSS (in WpCodebox) since I can’t control SVG size on a block level with Bricks.
Block level classes:
icon-list
icon-list--m
icon-list--s
icon-list--primary
icon-list--secondary
icon-list--accent
Child level classes:
icon-list__li
icon-list__svg
icon-list__txt
b.) Use a semi-BEM approach for 2 different sizes and a modifier for color:
Block level classes:
icon-list
icon-list--m
icon-list--s
icon-list--primary
icon-list--secondary
icon-list--accent
Child level classes:
icon-list--m__li
icon-list--m__svg
icon-list--m__txt
icon-list--s__li
icon-list--s__svg
icon-list--s__txt
c.) Use components + variations