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!

vinceOP•9/27/22, 12:16 AM

Now that I look at it I could probably delete and make 2 classes: and (but now that I look at it again I'm not sure if that would be in the spirit of BEM)?

vinceOP•9/27/22, 12:16 AM

This is harder than writing actual css

Joao•9/27/22, 12:18 AM

I think you might enjoy tailwind css

Joao•9/27/22, 12:18 AM

https://tailwindcss.com/

JJoao I think you might enjoy tailwind css 👀

vinceOP•9/27/22, 12:19 AM

Why's that

Joao•9/27/22, 12:19 AM

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

vinceOP•9/27/22, 12:20 AM

But I love css! my favorite part about web development

vinceOP•9/27/22, 12:20 AM

It's just the design patterns that I don't have a clue about haha

Joao•9/27/22, 12:20 AM

Well in that case back on topic

Joao•9/27/22, 12:22 AM

I personally think its fine to make this much separation, like classes like and , etc. but only if I use them once or twice for specific cases

Joao•9/27/22, 12:23 AM

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.

Joao•9/27/22, 12:24 AM

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.

JJoao Whatever else you plan to use them for, you can and probably should use somethin...

vinceOP•9/27/22, 12:25 AM

Is the way that I wrote/designed classes and BEM mutually exclusive though? For example: flex is the block and center is the modifier therefore . Or should the block names be more descriptive rather than a general container?

JJoao That's just me though. If I wanted something that flexible I would be using som...

vinceOP•9/27/22, 12:26 AM

That's a good point but my own css is fun :)

Vvince Is the way that I wrote/designed classes and BEM mutually exclusive though? For ...

Joao•9/27/22, 12:28 AM

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

Joao•9/27/22, 12:30 AM

If I see 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.

Joao•9/27/22, 12:31 AM

So you could have 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.

Joao•9/27/22, 12:32 AM

Just a quick off the top example so not entirely sure this applies always

vinceOP•9/27/22, 12:35 AM

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

vinceOP•9/27/22, 12:35 AM

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

Joao•9/27/22, 12:38 AM

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)

vinceOP•9/27/22, 12:39 AM

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•9/27/22, 12:42 AM

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

Let's say is for a recipe or something. In this case I really don't think there's much need for . 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

JJoao Yeah, sometimes is okay to not write any class for example: ```html <ul class="m...

vinceOP•9/27/22, 12:43 AM

That's a valid point! I'm thinking about that with my 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•9/27/22, 12:45 AM

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 you would have or something. It's also fine to mix blocks within blocks, though you don't see it often.

vinceOP•9/27/22, 12:47 AM

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•9/27/22, 12:48 AM

Better believe it

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

JJamie vince, they're some beautiful BEM classes. I have spent all day working on BEM a...

vinceOP•9/27/22, 7:41 AM

Thank you!! I appreciate your insight