Breaking styles into individual components

[mindl3ss]

I have been trying to find a maintainable, scalable way of writing CSS. This has lead me to alot of CSS techniques like BEM, OOCSS and others. While all these techniques have their own good and bad side, I have not yet come to a better way of writing CSS. So I started writing something which would make sense to me. So basically here’s how it would look.

Previous:

`

I am header

.header-h3 {
font-size: 1.5em;
color: black;
text-transform: uppercase;
padding: 0px 30px;
margin: 0;
}
`

Would be:

`

I am header

.font-size-24 { font-size: 1.5em; }
.txt-clr-black { color: black; }
.txt-uppercase { text-transform: uppercase; }
.padding-left-30 { padding-left: 30px; }
.padding-right-30 { padding-right: 30px; }
.margin-0 { margin: 0; }

`

You can imagine, the class based system would look pretty messed up on the html side. Also each elements have to repeated if same element is used elsewhere. So whole html file will have alot of classes in it. But it is easy to maintain. If I want to add another property say h3 has underline. Then I can just add .text-underline class to the element.

I just wanted to know what you think about this style and suggest me better way to write nice css and html markups.

Thank you.

[Paulie_D]

Almost all of the rules for BEM, SMACSS etc will tell you that using classes with property value descriptive names like txt-clr-black should be avoided like the plague.

They’re all very well but if at some point you decide that you want to use red instead your classname makes no sense….so you have to create a new class…which leads to bloat.

That’s why they recommend classnames like .txt-clr-normal and txt-clr-alert….they’re still descriptive but in a non-specific way.

So, you decide to change the alert color to pink, it’s simple fix and the class name is still descriptive.

Frankly, your method is a shipload of extra work that I, personally would find overcomplicated and bloated.

[bearhead]

It’s cool if this method works for you, but it seems like a lot of extra work… plus your html files will be heavier.

Also, what would happen if you wanted to target a specific set of divs (like a group of project cards in a portfolio)? You would have to give that set its own class right? If that’s the case, why not just add the rest of the styling to that class, instead of tacking on all those extra classes?

I do see the value of having something like a font color class be separate… but like Paulie_D wrote, it would be better to use non-specific names for those (so like: text-clr-def, or text-clr-link).

[mindl3ss]

That’s true. This method has definitely made html files heavy. And also also the idea of having non-specific names like text-clr-def or text-clr-link is very good. But when you are working on let’s say website, the possibility of change in color from red to blue is far less. For one working on a company which has a fixed style sheet, the changes like this (from blue to red) is very rare (unless you work on a lot of projects).

I am only trying to find a good methodology to have something that would be easier to change. We are definitely moving from this to more non-specific name based system.

Just wanted to know the thought of what others thing.

[Author]

Posts