1

I have about somewhat similar styles that each have about 6-7 lines of code that are the same, like this:

custom-style-1 {
    font-size: 12px;
    color: red;
    //Here come the specifics!
}

custom-style-2 {
    font-size: 12px;
    color: red;
    //Here come the specifics!
}

custom-style-3 {
    font-size: 12px;
    color: red;
    //Here come the specifics!
}
..
..

So I wrote this and removed the repeating properties from each class:

[class*="custom-style-"],
[class*="custom-style-"] {
    font-size: 12px;
    color: red;
}

But then thought, why not just write another class:

.this-class-is-default-style {
    font-size: 12px;
    color: red;
}

and just adding it to the <div class="{list-here}"> within the html.

Which one is more expensive in terms of render time? Additionally, are there any flexibility issues or drawbacks from using a method and not the only one?

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
Daniel Moss
  • 447
  • 1
  • 5
  • 17
  • 3
    _"Which one is more expensive in terms of render time?"_ - only some freaks with their little calipers and measuring devices will ever know ... to everyone else it will so not matter :) – CBroe Oct 15 '17 at 05:58
  • @CBroe I'm very much trying to optimize eveything I do as best as I can from the get-go and learn to code in a certain way, JS too, so, I'm interested :) Perhaps someone knows the answer. – Daniel Moss Oct 15 '17 at 06:03
  • Your implementation isn't quite correct either. You have `[class*="custom-style-"]` twice. One of them should be `[class^="custom-style-"]` and the other should be `[class*=" custom-style-"]`. See https://stackoverflow.com/questions/3338680/is-there-a-css-selector-by-class-prefix/8588532#8588532 – BoltClock Oct 15 '17 at 06:43
  • What's happening is a string comparison. For any single comparison (S1 and S2), checking that S1 == S2 is always faster than (or equal to) testing that S1 contains S2 (is contained somewhere within). Assuming it's not disqualified because the one you want contained is longer than the one you are checking to see if it's contained within: It's faster because to test for contains you make a minimum of (S1.length + 1 - S2.length) comparisons to disqualify, instead of a minimum of 1 comparison to disqualify for S1 == S2. The maximum is also longer at S1.length instead of min(S1.length,S2.length). – Makyen Oct 15 '17 at 07:09

1 Answers1

3

The second approach (using a specific class without class*=...) is probably better as the browser does not need to perform a contains search on all class attributes (but the performance gain should be negligible in most cases). Browsers are optimized to find a css class as its the normal case.

But the more important thing about the second way is that is more safe because the chance of applying unwanted class'es to elements will be lower. if the name of custom-style- be not very special and unique, it may be similar to many other class names in your css files which may cause some errors in future.

Even if you choose the first method, i suggest you to use the method specified by BoltClock: [class^="custom-style-"], [class*=" custom-style-"] {...} to minimize the chance of overlap and considering that the class name can be at beginning or middle of the list.

S.Serpooshan
  • 7,608
  • 4
  • 33
  • 61
  • 1
    Re: last paragraph, as I've now pointed out the implementation isn't correct anyway. The correct implementation which I link to is robust for all but the most extreme edge cases. – BoltClock Oct 15 '17 at 06:47