cross-posted from: https://programming.dev/post/1923251

Some frontend developers know the BEM methodology as a naming convention for CSS and they create a disgusting #webcomponents. I’ve explain the essence of BEM and shown the benefits for your frontend projects.

Feel free to share it with a people who tells you “i use CSS-modules, so i no needs a BEM”

  • FoxBJK
    link
    fedilink
    English
    arrow-up
    3
    ·
    1 year ago

    I like BEM in theory, but whenever I actually dive in and start setting up the naming scheme what I end up with are some really long and convoluted identifiers that don’t always make things easier to organize.

    • vitonsky@programming.devOP
      link
      fedilink
      arrow-up
      1
      arrow-down
      2
      ·
      1 year ago

      As i shown in blog post, the BEM power is a code decoupling and features composing ability in a typescript/javascript code. CSS naming strategy is just a small part of BEM. BEM also works great for native mobile applications where CSS does not exist at all

      • FoxBJK
        link
        fedilink
        English
        arrow-up
        3
        ·
        1 year ago

        Yes I get that, just not a fan of what it ends up looking like. Feels like more effort than necessary for what’s really just a naming scheme.

  • g6d3np81@kbin.social
    link
    fedilink
    arrow-up
    2
    ·
    edit-2
    1 year ago

    BEM is are methodology about atomic code design, it gives you a standards and guides how to simplify code maintaining.

    Isn’t this also what Tailwind, UNOCSS and the likes about?
    Sounds like he have a problem where working in project using BEM, different team use it in different way (which I think as what to expect). And when components are involved, is CSS convention really the focus here?

    edit: ok, I think I finally got your point…
    How does BEM differ from OOCSS, AMCSS, SMACSS, SUITCSS?
    Well… this thing feels like frontend framework with extra step.

    • vitonsky@programming.devOP
      link
      fedilink
      arrow-up
      1
      ·
      1 year ago

      If you think a Object Oriented Programming is a framework, then you can think about BEM like a framework too. But a correct word is a methodology. A “framework” have too generic meaning.

      Methodology gives us a methods how to improve software quality. This methods like an interfaces in programming that we must implement as programmers

      • g6d3np81@kbin.social
        link
        fedilink
        arrow-up
        1
        ·
        1 year ago

        I see. I might have done things in similar way without realizing what it is by just focusing on decoupling and reusability.