Issue
I have researched on this topic and i could not find the exact answer i needed.
For example i have so many divs that need a border. I could write a seperate css class like
.border{
border: solid;
border-color: #C6C6C6;
border-radius: 5px;
}
and use it in every div tag that needs a border. Or i could include
border: solid;
border-color: #C6C6C6;
border-radius: 5px;
properties to each and every css class i'm writing for my divs.
By writing a seperate class for border and using it reduces a huge chunk of lines in my css file. But my problem is, will it affect the performance of the web application if i include border properties to each and every css class i write for my divs.
Thanks in advance.
Solution
To be fair this is quite a loaded question...
I don't know if you are aware but CSS stands for Cascading Style Sheets, it was built to 'cascade' down from sheet to html tag. So the short answer is no, with today's internet connections, probably not. However here's a few things to consider...
1) Minifying the CSS - The best way to save on performance using CSS is 'minify' it. There are many online generators that can do this like this one https://cssminifier.com/. This will remove any characters that unnecessarily take up kb in the document, such as spaces and line breaks for example.
2) User Experience - Users in countries like the USA or the United Kingdom now for the most part have access to high-speed broadband, but you must consider that on some very very old connections you'll find that having to re-draw that rule from each tag can take time.
3) Readability and Debugging - If you need to come back tot hat code later and decide that you want to change the border colour, you're doing to have to do that on each and every tag to apply that change as opposed to one simple change on one style sheet. Also if you try to debug this using and kind of in-browser development tool you'll find this is also more complicated that simply looking up one value on one rule instead of however many tabs this is being applied to.
4) The Cascade Effect - Finally, this completely defies the point of the CSS model in the first place as their styles trickle down from rule, to style declaration (in the html header), to tag, which makes both documents, not only easy to read but easy to edit too.
So in short, yes there is a performance benefit, but not noticeably so unless on an older connection, but the benefits in other areas of development are much stranger than just the loading speed alone.
Answered By - Web Develop Wolf
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.