Am I breaking up my css too much?

I have container that looks like this:

<main class="flex flex-column flex-center flex-messages">
  <div class="flex-wrapper">
    <div class="flex flex-center header"></div>
  </div>
</main>

<main class="flex flex-column flex-center flex-messages">
  <div class="flex-wrapper">
    <div class="flex flex-center header"></div>
  </div>
</main>

As you can see, I have a lot of classes. I'm writing these classes with reusability, readability, and maintainability in mind. My css is like follows:

.flex {
  display: flex;
}

.flex-column {
  flex-direction: column;
}

.flex-center {
  align-items: center;
  justify-content: center;
}

.flex {
  display: flex;
}

.flex-column {
  flex-direction: column;
}

.flex-center {
  align-items: center;
  justify-content: center;
}

etc. you get the point. I'm also following BEM so I'm trying to be super strict about my class names and what they do but I think I might be being too strict but I've never truly worked on professional projects where I could see how they divide their css. Any advice and guidance would be appreciated!

18 Replies

vince•3y ago

Now that I look at it I could probably delete .flex and make 2 classes: .flex-column and .flex-row (but now that I look at it again I'm not sure if that would be in the spirit of BEM)? This is harder than writing actual css 😅

Joao•3y ago

I think you might enjoy tailwind css 👀 https://tailwindcss.com/

vince•3y ago

Why's that 👀

Joao•3y ago

Because is all about small utility classes that you write on the html, hardly ever need to write any css

vince•3y ago

But I love css! my favorite part about web development 😂 It's just the design patterns that I don't have a clue about haha

Joao•3y ago

Well in that case back on topic I personally think its fine to make this much separation, like classes like .flex and .flex-row, etc. but only if I use them once or twice for specific cases Whatever else you plan to use them for, you can and probably should use something else like BEM or whatever other naming convention you come up with. That's just me though. If I wanted something that flexible I would be using some existing CSS framework/library instead of making my own.

vince•3y ago

Is the way that I wrote/designed classes and BEM mutually exclusive though? For example: .flex-center flex is the block and center is the modifier therefore .flex-center. Or should the block names be more descriptive rather than a general flex container? That's a good point but my own css is fun :)

Joao•3y ago

Yes, they should be more descriptive and also unique. If you plan on using this only once then it's fine, but of course doesn't really make sense to have two blocks with the same name If I see flex-center on css class I immediately assume it's a utility that serves one very specific purpose though. But you can still use it with BEM as that, a utility, instead of a modifier. A modifier is supposed to be a variation of a block or element. So you could have card card--transparent flex-center It means, this particular card is of the transparent variant, and also centered (for whatever reason). Since being centered is not really a quality of card, just a position, I don't think is worth making its own modified for that. Just a quick off the top example so not entirely sure this applies always

vince•3y ago

No that makes a lot of sense, thank you! I ended up rewriting it to this:

<main class="phone">
  <div class="phone__wrapper">
    <div class="phone__header"></div>
    <div class="phone__message phone__message-bot">
      <div class="message__content"></div>
    </div>
  </div>
</main>

<main class="phone">
  <div class="phone__wrapper">
    <div class="phone__header"></div>
    <div class="phone__message phone__message-bot">
      <div class="message__content"></div>
    </div>
  </div>
</main>

not quite sure how I like that still but I think it's more inline with BEM

Joao•3y ago

Yeah the thing with BEM is that it's quite a mouthful sometimes. But it allows to see what it's supposed to represent and/or how the code is organized, rather than how it's styled (which is css responsibility)

vince•3y ago

Right! From what I read it seems class names should be readable/verbose enough to not have to rely on nested selectors and the like

Joao•3y ago

Yeah, sometimes is okay to not write any class for example:

<ul class="menu">
  <li class="menu__item">
    <p class="menu__ingredient">10g sugar</p>
  </li>
</ul>

<ul class="menu">
  <li class="menu__item">
    <p class="menu__ingredient">10g sugar</p>
  </li>
</ul>

Let's say is for a recipe or something. In this case I really don't think there's much need for menu__ingredient. The text itself makes it clear, and if you need to select it with css you can do it easily and without creating conflicts with other rules

menu__item p {}

menu__item p {}

vince•3y ago

That's a valid point! I'm thinking about that with my phone__wrapper class right now but I don't think its purpose would be clear if I just did an element selector with it so I'm probably going to keep it

Joao•3y ago

Maybe, you can always come back to it later. If you see that you need to repeat the pattern in other places, you can make it its own block. Then instead of phone__wrapper you would have container or something. It's also fine to mix blocks within blocks, though you don't see it often.

vince•3y ago

Awesome, thank you! I can't believe this has taken me almost an hour and a half just to come up with a proper naming scheme 😂

Joao•3y ago

Better believe it 😄

There are only two hard things in computer science: cache invalidation and naming things. — Phil Karlton

Unknown User•3y ago

Message Not Public

vince•3y ago

Thank you!! I appreciate your insight 😊😊

Gaming

Programming

Am I breaking up my css too much?