Printable Version of Topic

Click here to view this topic in its original format

HTMLHelp Forums _ Cascading Style Sheets _ best practice and speed for repeated elements

Posted by: turpentyne Sep 1 2019, 06:56 PM

Kind of a general question, but I'm wondering if anyone knows for sure which is best.

When I have a stylesheet where a declaration exists several times, I tend to think I can simplify and clean things up by applying it to multiple classes and Ids at a time. This seems best practice, but I wonder if it's really any faster.

example... which is faster, better, best practice? Imagine a scenario where it isn't just three items, but 20 or more. (note: To simplify, I wrote ''several other declarations" rather than a bunch of random declarations.)

This:

.item1 { width: 100%; /* several other declarations */ }
.item2 { width: 100% /* several other declarations */}
.item3 { width: 100% /* several other declarations */}



Or this, which I tend to do... but I'm not sure it's really any quicker... sometimes it even seems like it's More lines, though I'm trying to get rid of duplication:

.item1,
.item2,
.item3 { width: 100%; }

.item1 { /* several other declarations */ }
.item2 { /* several other declarations */ }
.item3 { /* several other declarations */ }




Posted by: pandy Sep 1 2019, 07:17 PM

You mean quicker to load? One of them would probably turn out to be quicker, if we had a way to measure that. But I doubt there would be any noticeable difference, not even on the slowest of servers with a really slow connection.

I'd go for what you find most readable and the easiest to maintain.

Posted by: Christian J Sep 2 2019, 04:42 AM

QUOTE(turpentyne @ Sep 2 2019, 01:56 AM) *

When I have a stylesheet where a declaration exists several times, I tend to think I can simplify and clean things up by applying it to multiple classes and Ids at a time.

That's sometimes a good idea, though it can result in long lists of selectors that become hard to read:

CODE
.item1, .item2, .item3, /*...*/ .item99 {width: 100%;}


Another thing you can do is give elements two or more classes, like this:

CSS
CODE
.item {width: 100%;}

.item1 { /* several other declarations */ }
.item2 { /* several other declarations */ }
.item3 { /* several other declarations */ }


HTML
CODE
<div class="item item1">...</div>
<div class="item item2">...</div>
<div class="item item3">...</div>

But again, you sometimes end up with too many CLASS names for each element, like:

CODE
<div class="value1 value2 value3 value4 value5 value6 value7 value8">...</div>

(this seems to be common with blog scripts and similar, maybe it's easier to write the PHP on server-side that way).

Even shorter might be to take advantage of the HTML structure and use https://www.w3.org/TR/selectors/#structural-pseudos. Then you don't need to create any classes in the HTML, but the CSS can become a bit complex and/or terse, and it's not very portable, so if you ever change the HTML you may have to redo it all.

Personally I like to use HTML container elements, like this:

CSS
CODE
.container {width: 100%;}

.item1 { /* several other declarations */ }
.item2 { /* several other declarations */ }
.item3 { /* several other declarations */ }


HTML
CODE
<div class="container">
<div class="item1">...</div>
<div class="item2">...</div>
</div>

In my experience that strikes a good balance between complexity and CSS+HTML code.


Posted by: Ivy Crawford Nov 4 2019, 06:00 AM

I'd listen to Christian J, you really need to keep in mind to have complexity and CSS/HTML code balanced.

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)