Stories
Slash Boxes
Comments

SoylentNews is people

posted by cmn32480 on Tuesday June 27 2017, @12:46AM   Printer-friendly
from the everything-should-be-in-plain-text dept.

Though somewhat DRY reading, the author provides salient commentary on how many declarations appear in style sheets, how many of those are unique, and offers perspectives on what that means for developing and maintaining web sites. From https://meiert.com/en/blog/70-percent-css-repetition/:

Teaser: Check on how many declarations you use in your style sheets, how many of those declarations are unique, and what that means.

In 2008 I've argued that using declarations just once makes for a key method to DRY up our style sheets (this works because avoiding declaration repetition is usually more effective than avoiding selector repetition—declarations are often longer). I've later raised the suspicion that the demand for variables would have been more informed and civilized had we nailed style sheet optimization. What I haven't done so far is gather data to show how big the problem really is. That's what I've done in the last few weeks.

In a Google spreadsheet I've collected the Top 200 of content sites in the The Moz Top 500, and taken another 20 sites related to web development for comparison. (I've also added 3 of my sites out of curiosity.) I've then used the extremely useful CSS Stats to determine the total number of CSS declarations, as well as the number of unique declarations, to calculate ratios as well as averages: You get the idea as soon as you check out said spreadsheet.

[...] Before we dissect the numbers, let's first quickly establish what one can consider good CSS development practice:

  • As with all code, don't repeat yourself (DRY).

  • In CSS, an effective way to not repeat yourself is to use declarations just once. The resulting repetition of selectors is less of a problem because declarations are usually longer than selectors—and yet variable selector length makes using declarations once a soft rule that still requires thinking. (More as follows.)

  • No repetition of declarations is theoretically attainable, but in practice, two things interfere: Not just in cases when selector order is mandated (another oft-forgotten subject, yet there are detailed proposals on how to standardize selector sorting), the cascade may not permit grouping of all selectors; and when strict separation of modules (CSS sections) is important, one may also tolerate some repetition. These two pieces deserve more elaboration, but relevant here is the note that strict separation of modules should not be used as a blanket refusal to curb declaration repetition—as the data show, that would be foolish.

Now, what is a reasonable amount of repetition? From my experience, 10–20%; in other words, 80–90% of a style sheet should consist of unique declarations. Reality, however, looks vastly different, and here we get to the 70%.

I found the analysis to be informative and eye-opening. What have you found to be best practices when it comes to Cascading Style Sheets?


Original Submission

 
This discussion has been archived. No new comments can be posted.
Display Options Threshold/Breakthrough Mark All as Read Mark All as Unread
The Fine Print: The following comments are owned by whoever posted them. We are not responsible for them in any way.
  • (Score: 2) by FatPhil on Tuesday June 27 2017, @07:30PM (1 child)

    by FatPhil (863) <pc-soylentNO@SPAMasdf.fi> on Tuesday June 27 2017, @07:30PM (#532080) Homepage
    It's not entirely garbage. If it's a coding style, and your web diddlers are all familiar with it, then it's not an optimisation, it's just the way you do things. However, you need to have a concrete reason that isn't just optimisation.

    For aiding register colouring in non-SSA compilers, placing declarations just before, or as the first use of a variable is an optimisation. However, it's often a prefered or formalised coding style, so it's not an optimisation, it's just how you do things, it's the RAII paradigm. Or you don't - some coding standards specify the exact opposite.

    Anyway, don't do it solely as an optimisation, do it because it is a style you prefer for maintainability. However, as another poster noted, not all things that are equal are the same, so merging all "8px" fonts together may be an illogical coupling of unrelated things. Consider what you are likely to want to change independently of other things. Font sizes in a header/footer block may be coincidentally the same size as side menus or body text, but having them share a CSS rule is an antipattern if you think that you might want to restyle the header or the footer or the menus at a later date. Pretent they're CSS vars, and ask yourself if they're the same var. THe answer is that there's a good chance they're not, and therefore you will not want to follow the article's advice as it will be *bad* for maintainance.

    So, coming back full circle to where you came in, yes it looks like he's holding the unproven optimisation aspect as the ultimate end goal, and yes, he's therefore applying some wrongthink.
    --
    Great minds discuss ideas; average minds discuss events; small minds discuss people; the smallest discuss themselves
    Starting Score:    1  point
    Karma-Bonus Modifier   +1  

    Total Score:   2  
  • (Score: 2) by The Mighty Buzzard on Wednesday June 28 2017, @02:17AM

    by The Mighty Buzzard (18) Subscriber Badge <themightybuzzard@proton.me> on Wednesday June 28 2017, @02:17AM (#532246) Homepage Journal

    Bingo. I just don't care to go into that much detail often.

    --
    My rights don't end where your fear begins.