css coding

[saltedweb]

i have been thinking off trying something a little different with css coding (not sure if people already use this in practice) but was wondering if anyone either does do this or if there is some reason i shouldn’t do it.

the reason i came up with this is i was tired of writing specific styles for one element that would utilise styles from a few different elements, so i thought instead of writing a new generic style write a lot of smaller ones that get reused easily.

so some example css would be:

.lightgrey {
color:#efefef;
}
.bold {
font-weight:bold;
}
.italic {
font-style:italic;
}
.upper {
text-transform:uppercase;
}
.icon {
background: url(‘../img/icons.png’) no-repeat;
}
.arrow {
width:10px;
height:10px;
background-position:-35px 0px
}
so whenever i need some specific style (that doesnt come under an existing style), I just call it up like:

<p class=”lightgrey bold italic upper”>Some text<⁄p>

or

<span class=”icon arrow”><⁄span>

that way i see it, the css gets reused very easily, but what tends to happen is (as above) the class gets packed with styles sometimes 4 or 5 of them. so my worry is, would this have an impact on load times and possible be a nightmare to maintain.

Am I completely wrong in writing code like this? Has anyone written code like this before and have some feedback on maintenance/page load etc?

[joshuanhibbert]

It isn’t great semantically. What happens if you want to change the font-style of an element? Usually you would just do so in your CSS, but with this method you would also have to change the class names in your HTML also.

[saltedweb]

well main styles (font etc) would be set on the p element, but the above really is just for specific one off elements not meant to be used for the entire styling.

[saltedweb]

appreciate the feedback though

[joshuanhibbert]

Have a look at this article Chris wrote: https://css-tricks.com/13423-semantic-class-names/

[saltedweb]

thanks good article.

[joshuanhibbert]

[Johann]

“What happens if you want to change the font-style of an element?”

I do a mixture of that. I don’t have “.light-grey”, but I do have “.pown” for example (== only visible to owner, colors stuff red). attempting to make my own CMS, I simply don’t want to have a billion class names, so my “design” is rather LEGO brick like. I never want to change the style of “that box on this page”, I want to change the style of UI elements. and that I can do just fine with that approach.

one thing in that article really made no sense to me, about .left for floating something left: I have .tleft and .tcent for aligning text, I use it for table cells usually. I do NOT want to have “.stats_something .hit_count {text-align:right;}” in my CSS, sorry! I’d rather have class=”tleft” in my HTML. if I wanted to align it differently, that would always be an effect of changes in the HTML, there is no way I would change some things just via CSS. so that sounds a bit theoretical for me, especially since it fails to answer how else to do it. specify a new class for something just to align it like you align a thousand other things? or put it in a wrapper? huh. try creating a stylesheet for hundreds, maybe thousands of pages while being semantic and staying under 50k, good luck :/

[Author]

Posts