• Colm TuiteColm Tuite, over 5 years ago (edited over 5 years ago )

    Here's a slightly more involved example which explains the approach a bit better.

    It showcases two acceptable approaches to styling a button, using 3 abstracted, reusable styles.

    0 points
    • Jim SilvermanJim Silverman, over 5 years ago

      i assume you meant to write ''?

      not sure what you're saving with '.displayInlineBlock' as it's class name is so specific -- it's essentially an inline style. also '.fs1' becomes a poor name once you add a rule besides 'font-size' to it. '.bgPrimary' has a text color in it, but is labelled bg?

      regardless, this doesn't have anything to do with BEM. there's no "block" in any of the class names.

      0 points
      • Colm TuiteColm Tuite, over 5 years ago

        it's essentially an inline style

        This is a common argument, which holds no weight. Writing this declaration hundreds of times across a project as an inline style, is in no way shape or form the same as writing it once, as an abstracted, reusable class.

        '.fs1' becomes a poor name once you add a rule besides 'font-size' to it.

        So don't add anything that makes it not reusable. Usually, the only other property I add to my font size declarations is line-height.

        '.bgPrimary' has a text color in it, but is labelled bg?

        Yeah, because anytime I see that coral color, I want the text on it to be white. This may not hold true in other projects, but it's an example of how I've declared "coral background and white text" as a reusable style that I can apply to buttons, landing page sections etc.

        regardless, this doesn't have anything to do with BEM

        True. But BEM is just a naming convention. It's not that interesting or important imo. Understanding the need for tiny, abstracted, reusable CSS objects is much more important.

        0 points