Mixing
What happens to unused css rules?
I have a style.css file and almost every component on the website is using rules from this file, but not always for example I have a main template and then a section where requested pages are displayed and of course requested pages sometimes have parts which are unique(not in other pages) and use rules from style.css.
my question is what happens to the css rules that are not used by the current page?
Let's assume that there's a login page and in the login page there's some special button called button_xyz (only exists in login page). The css rule for this button is inside style.css - What happens to this rule when a page, which does not require this rule, is in use?
Does it use extra memory?
Does the browser optimize this for you?
html css optimization
asked Jan 1 at 17:33
FeelsbadmanFeelsbadman
686624
add a comment |
I have a style.css file and almost every component on the website is using rules from this file, but not always for example I have a main template and then a section where requested pages are displayed and of course requested pages sometimes have parts which are unique(not in other pages) and use rules from style.css.
my question is what happens to the css rules that are not used by the current page?
Let's assume that there's a login page and in the login page there's some special button called button_xyz (only exists in login page). The css rule for this button is inside style.css - What happens to this rule when a page, which does not require this rule, is in use?
Does it use extra memory?
Does the browser optimize this for you?
html css optimization
asked Jan 1 at 17:33
FeelsbadmanFeelsbadman
686624
add a comment |
I have a style.css file and almost every component on the website is using rules from this file, but not always for example I have a main template and then a section where requested pages are displayed and of course requested pages sometimes have parts which are unique(not in other pages) and use rules from style.css.
my question is what happens to the css rules that are not used by the current page?
Let's assume that there's a login page and in the login page there's some special button called button_xyz (only exists in login page). The css rule for this button is inside style.css - What happens to this rule when a page, which does not require this rule, is in use?
Does it use extra memory?
Does the browser optimize this for you?
html css optimization
asked Jan 1 at 17:33
FeelsbadmanFeelsbadman
686624
I have a style.css file and almost every component on the website is using rules from this file, but not always for example I have a main template and then a section where requested pages are displayed and of course requested pages sometimes have parts which are unique(not in other pages) and use rules from style.css.
my question is what happens to the css rules that are not used by the current page?
Let's assume that there's a login page and in the login page there's some special button called button_xyz (only exists in login page). The css rule for this button is inside style.css - What happens to this rule when a page, which does not require this rule, is in use?
Does it use extra memory?
Does the browser optimize this for you?
html css optimization
html css optimization
asked Jan 1 at 17:33
FeelsbadmanFeelsbadman
686624
asked Jan 1 at 17:33
FeelsbadmanFeelsbadman
686624
asked Jan 1 at 17:33
FeelsbadmanFeelsbadman
686624
asked Jan 1 at 17:33
FeelsbadmanFeelsbadman
686624
asked Jan 1 at 17:33
FeelsbadmanFeelsbadman
686624
686624
add a comment |
add a comment |
3 Answers
3
active
oldest
votes
Unused CSS rules probably use a little extra memory, but not on a scale that matters for even the weakest of devices. Some additional time will also be spent parsing the CSS, but not on a level you'd likely be able to even measure.
The main concern about unused CSS rules is that it's wasted bandwidth, but if you only have a few that would be unused on each page I'd say it's best to stick with putting all styles in one file and making sure it gets cached by the browser.
Unless your CSS is drastically inefficient, bandwidth shouldn't be of concern, assuming your server gzips files to send them to your visitors. The bandwidth used really is nothing at all these days. It won't make much difference, but you may also be interested at looking into minifying your CSS, and also HTML and JavaScript while you're at it.
answered Jan 1 at 17:47
spacer GIFspacer GIF
344112
add a comment |
the unused css rules will be a burden for your user who access your website.
because the user first time access your website will download all your css and javascript after that cache it in your web browser. if there are many unused css it size will become big
answered Jan 1 at 18:30
dennisgondennisgon
517
add a comment |
Css matches your rules based on regular expressions. You have a database inside your browser for exact match, where some kind of hash table works to match exactly name A to name B and since CSS supports Regular Expressions, it can also search with a while loop if regular expression is supplied. For ApplyToAll aka *{ it's also some kind of optimization similar to hash table which applies a rule to everything on the site. So in case you don't have regexes and you don't since in stylesheet they are complex to write, your site won't slow down.
answered Jan 1 at 18:35
Vitali PomanitskiVitali Pomanitski
276
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53997521%2fwhat-happens-to-unused-css-rules%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
3 Answers
3
active
oldest
votes
3 Answers
3
active
oldest
votes
active
oldest
votes
active
oldest
votes
Unused CSS rules probably use a little extra memory, but not on a scale that matters for even the weakest of devices. Some additional time will also be spent parsing the CSS, but not on a level you'd likely be able to even measure.
The main concern about unused CSS rules is that it's wasted bandwidth, but if you only have a few that would be unused on each page I'd say it's best to stick with putting all styles in one file and making sure it gets cached by the browser.
Unless your CSS is drastically inefficient, bandwidth shouldn't be of concern, assuming your server gzips files to send them to your visitors. The bandwidth used really is nothing at all these days. It won't make much difference, but you may also be interested at looking into minifying your CSS, and also HTML and JavaScript while you're at it.
answered Jan 1 at 17:47
spacer GIFspacer GIF
344112
add a comment |
Unused CSS rules probably use a little extra memory, but not on a scale that matters for even the weakest of devices. Some additional time will also be spent parsing the CSS, but not on a level you'd likely be able to even measure.
The main concern about unused CSS rules is that it's wasted bandwidth, but if you only have a few that would be unused on each page I'd say it's best to stick with putting all styles in one file and making sure it gets cached by the browser.
Unless your CSS is drastically inefficient, bandwidth shouldn't be of concern, assuming your server gzips files to send them to your visitors. The bandwidth used really is nothing at all these days. It won't make much difference, but you may also be interested at looking into minifying your CSS, and also HTML and JavaScript while you're at it.
answered Jan 1 at 17:47
spacer GIFspacer GIF
344112
add a comment |
Unused CSS rules probably use a little extra memory, but not on a scale that matters for even the weakest of devices. Some additional time will also be spent parsing the CSS, but not on a level you'd likely be able to even measure.
The main concern about unused CSS rules is that it's wasted bandwidth, but if you only have a few that would be unused on each page I'd say it's best to stick with putting all styles in one file and making sure it gets cached by the browser.
Unless your CSS is drastically inefficient, bandwidth shouldn't be of concern, assuming your server gzips files to send them to your visitors. The bandwidth used really is nothing at all these days. It won't make much difference, but you may also be interested at looking into minifying your CSS, and also HTML and JavaScript while you're at it.
answered Jan 1 at 17:47
spacer GIFspacer GIF
344112
Unused CSS rules probably use a little extra memory, but not on a scale that matters for even the weakest of devices. Some additional time will also be spent parsing the CSS, but not on a level you'd likely be able to even measure.
The main concern about unused CSS rules is that it's wasted bandwidth, but if you only have a few that would be unused on each page I'd say it's best to stick with putting all styles in one file and making sure it gets cached by the browser.
Unless your CSS is drastically inefficient, bandwidth shouldn't be of concern, assuming your server gzips files to send them to your visitors. The bandwidth used really is nothing at all these days. It won't make much difference, but you may also be interested at looking into minifying your CSS, and also HTML and JavaScript while you're at it.
answered Jan 1 at 17:47
spacer GIFspacer GIF
344112
answered Jan 1 at 17:47
spacer GIFspacer GIF
344112
answered Jan 1 at 17:47
spacer GIFspacer GIF
344112
answered Jan 1 at 17:47
spacer GIFspacer GIF
344112
344112
add a comment |
add a comment |
the unused css rules will be a burden for your user who access your website.
because the user first time access your website will download all your css and javascript after that cache it in your web browser. if there are many unused css it size will become big
answered Jan 1 at 18:30
dennisgondennisgon
517
add a comment |
the unused css rules will be a burden for your user who access your website.
because the user first time access your website will download all your css and javascript after that cache it in your web browser. if there are many unused css it size will become big
answered Jan 1 at 18:30
dennisgondennisgon
517
add a comment |
the unused css rules will be a burden for your user who access your website.
because the user first time access your website will download all your css and javascript after that cache it in your web browser. if there are many unused css it size will become big
answered Jan 1 at 18:30
dennisgondennisgon
517
the unused css rules will be a burden for your user who access your website.
because the user first time access your website will download all your css and javascript after that cache it in your web browser. if there are many unused css it size will become big
answered Jan 1 at 18:30
dennisgondennisgon
517
answered Jan 1 at 18:30
dennisgondennisgon
517
answered Jan 1 at 18:30
dennisgondennisgon
517
answered Jan 1 at 18:30
dennisgondennisgon
517
517
add a comment |
add a comment |
Css matches your rules based on regular expressions. You have a database inside your browser for exact match, where some kind of hash table works to match exactly name A to name B and since CSS supports Regular Expressions, it can also search with a while loop if regular expression is supplied. For ApplyToAll aka *{ it's also some kind of optimization similar to hash table which applies a rule to everything on the site. So in case you don't have regexes and you don't since in stylesheet they are complex to write, your site won't slow down.
answered Jan 1 at 18:35
Vitali PomanitskiVitali Pomanitski
276
add a comment |
Css matches your rules based on regular expressions. You have a database inside your browser for exact match, where some kind of hash table works to match exactly name A to name B and since CSS supports Regular Expressions, it can also search with a while loop if regular expression is supplied. For ApplyToAll aka *{ it's also some kind of optimization similar to hash table which applies a rule to everything on the site. So in case you don't have regexes and you don't since in stylesheet they are complex to write, your site won't slow down.
answered Jan 1 at 18:35
Vitali PomanitskiVitali Pomanitski
276
add a comment |
Css matches your rules based on regular expressions. You have a database inside your browser for exact match, where some kind of hash table works to match exactly name A to name B and since CSS supports Regular Expressions, it can also search with a while loop if regular expression is supplied. For ApplyToAll aka *{ it's also some kind of optimization similar to hash table which applies a rule to everything on the site. So in case you don't have regexes and you don't since in stylesheet they are complex to write, your site won't slow down.
answered Jan 1 at 18:35
Vitali PomanitskiVitali Pomanitski
276
Css matches your rules based on regular expressions. You have a database inside your browser for exact match, where some kind of hash table works to match exactly name A to name B and since CSS supports Regular Expressions, it can also search with a while loop if regular expression is supplied. For ApplyToAll aka *{ it's also some kind of optimization similar to hash table which applies a rule to everything on the site. So in case you don't have regexes and you don't since in stylesheet they are complex to write, your site won't slow down.
answered Jan 1 at 18:35
Vitali PomanitskiVitali Pomanitski
276
answered Jan 1 at 18:35
Vitali PomanitskiVitali Pomanitski
276
answered Jan 1 at 18:35
Vitali PomanitskiVitali Pomanitski
276
answered Jan 1 at 18:35
Vitali PomanitskiVitali Pomanitski
276
276
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53997521%2fwhat-happens-to-unused-css-rules%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
