The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> best practice and speed for repeated elements
turpentyne
post Sep 1 2019, 06:56 PM
Post #1





Group: Members
Posts: 1
Joined: 1-September 19
Member No.: 26,980



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 */ }



User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Sep 1 2019, 07:17 PM
Post #2


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,461
Joined: 9-August 06
Member No.: 6



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Sep 2 2019, 04:42 AM
Post #3


.
********

Group: WDG Moderators
Posts: 8,256
Joined: 10-August 06
Member No.: 7



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 CSS child or sibling selectors to find each child element. 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.

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Ivy Crawford
post Nov 4 2019, 06:00 AM
Post #4


Newbie
*

Group: Members
Posts: 10
Joined: 4-November 19
Member No.: 27,030



I'd listen to Christian J, you really need to keep in mind to have complexity and CSS/HTML code balanced.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 12th December 2019 - 09:26 PM