Remove unnecessary CSS rules from css file

[pittu]

How to remove the css rules that are not using by the theme?

I tried Google tool (there will be a brush icon on browser) which lists all used css rules as we surf smf forum.

But is there any other tool/trick to clean the css rules?

thnx.

[Illori]

why are you trying to do this? you might cause more harm then good doing this.

[pittu]

Are you serious?
If we remove unused css rules from .css file, what harm will it cause?

It improves page speed further.

[Illori]

i dont think there are any unused css rules. that is why i asked my question. are you really going to check every single page in all of SMF to see if a rule is used before you delete it? you may be spending the rest of your life doing it.

[margarett]

Well, the trick is really to find these unused rules, that's the hardest part. If Google gives you such info, then you just have to remove them accordingly

About the load speed, well that's debatable Given today's internet speed, a couple bytes (if that much, 1kB) hardly makes a difference Besides, CSS is cached by browsers so it's not even transferred most of the page loads

[ARG01]

Are you serious?
If we remove unused css rules from .css file, what harm will it cause?

It improves page speed further.

The only harm it will cause is the time that you will never get back by removing items that more than likely will not affect page loading speed. As already stated, anything that may be deemed as useless would not amount to more than a k or two.
In other words, seeking these items and removing them would be more of a waste of time than anything else.

[Bloc]

i dont think there are any unused css rules. that is why i asked my question. are you really going to check every single page in all of SMF to see if a rule is used before you delete it? you may be spending the rest of your life doing it.

Not really. But it would take quite some time.

How to remove the css rules that are not using by the theme?

I tried Google tool (there will be a brush icon on browser) which lists all used css rules as we surf smf forum.

But is there any other tool/trick to clean the css rules?

thnx.

The thing is: the index.css collects ALL the different page styles within SMF into a single file(which is btw quite efficient in itself since its cached). Therefore, removing something in it WILL make something not work as it should.

Which is, IMO, doing it all wrong. Different pages in SMF should use common CSS classes as much as possible, not id-based styles that are not used anywhere else. That would certainly be less of a problem if SMF had different stylesheets for each part of SMF. But, it doesn't.

An example of how I think it would be better:  http://www.protendo.org/Themes/tp_default/css/index.css?fin20 It might be added a few more styles yet..but theres a big difference in approach between this and SMF default theme CSS. Less is more.

[Antes]

reusability that's what we did in 2.1 (curve2). More generic styles to use in repeated places.

https://github.com/SimpleMachines/SMF2.1/blob/release-2.1/Themes/default/css/index.css

[Bloc]

Which is commendable ..but its still a whopping 76kb in size. Adding more classes *should* have reduced its size from the 56kb of SMF 2.0.9, even with added responsive CSS(or is that just another file?) Mine is now 19kb(with all current and future responsive code), it might be up to 25-30kb in the end but I won't allow it any bigger. The goal is of course not only reducing size, but also allowing someone to actually get a grip with what they have to change. It also makes templating easier for modders that can re-use styles faster(less to remember and/or abuse ).

[Antes]

nearly 9kb of that size increase coming from moving images to CSS. I can decrease its size I'm sure of it but worth it ? don't think so at least for 2.1, we surely rebuild it for 3.0.

[Bloc]

Images in the CSS is nice, but hard to really theme..at least for those not familar with it. IMHO the default theme should avoid it, better left to custom themes. But reducing the amount of icons is of course vital and that I opted for in my work.

But minimizing the css will help tremendoulsy on the download size. SMF 2.1 does that doesn't it? Through the loadCSS functions? Its certainly something I will add too, to further get those 20kb + any extra stylesheets into one cached request.

[Bloc]

..about whether its in any use of trying reducing the 2.1 stylesheet: Yes, very much so IMO.

But not without rewriting the theme which I reckon none is interested in doing.

[Kindred]

no. the theme is not going to be re-written.   We are already in beta - almost beta 2 - there will be no major changes like that.

I also disagree that there is much use in reducing the 2.1 stylesheet that much
(and I disagree with your other statement as well- images in the stylesheets makes it EASIER to theme than images in all of the template files)

[Bloc]

Your statements makes no sense..but I am not surprised.

[Kindred]

Well, first of all, I made three statements... which are yo talking about?

and why does my statement make no sense?

I stated that
1- we would not be re-writing the theme, since we are already in beta. How does that make no sense?

2- I disagree with your contention that there is "very much" use in reducing the CSS...
Some maybe, but not "very much".  Also, how can a statement that "I disagree" not make sense?  I DISAGREE WITH YOU.

3- I also disagree with your contention that images identified in the CSS file makes it harder to customize themes.
In this case, I clearly stated my opposite contention. I believe that it makes it EASIER to customize - much easier than having to edit php template files.
and once again, repeating the comment above: Also, how can a statement that "I disagree" not make sense?  I DISAGREE WITH YOU.

as for the "I am not surprised" that is rude, obnoxious and uncalled for. I didn't insult you, I merely disagreed with your statements, so your personal insult to me was childish...

[Bloc]

Well, first of all, I made three statements... which are yo talking about?

and why does my statement make no sense?

I stated that
1- we would not be re-writing the theme, since we are already in beta. How does that make no sense?

It makes no sense that you state that "the theme will not be rewritten" when I didn't state that it ought to. I merely voiced my opinion of what *should* have been done - and if it had been up to me, it would have been rewritten long before any betas came along. I can only assume you wanted to nip a possible argument in the butt..but there was no need.

2- I disagree with your contention that there is "very much" use in reducing the CSS...
Some maybe, but not "very much".  Also, how can a statement that "I disagree" not make sense?  I DISAGREE WITH YOU.

You are obviously just playing with words here.

3- I also disagree with your contention that images identified in the CSS file makes it harder to customize themes.
In this case, I clearly stated my opposite contention. I believe that it makes it EASIER to customize - much easier than having to edit php template files.
and once again, repeating the comment above: Also, how can a statement that "I disagree" not make sense?  I DISAGREE WITH YOU.

Hm, I am actually wondering if we are talking about the same thing here. Calling images from stylesheet or base64 them into the stylesheet? If the former, then there is no argument at all.

as for the "I am not surprised" that is rude, obnoxious and uncalled for. I didn't insult you, I merely disagreed with your statements, so your personal insult to me was childish...

Why, I should not be allowed to say I am not surprised? lol, you can write you don't agree with me..but I can't write I am not surprised by it? And if i was not surprised that the arguments made no sense to me, that too is not allowed? I think we are done here.

[ARG01]

CSS files are extremely small in size and unless you are running IE 1.0 beta, there should be no noticeable loading issues. I am not sure why this is such a concern to anybody that knows code?

Your statements makes no sense..but I am not surprised.

For the record, I took this as an insult as well. I mean, who wouldn't?

[Kindred]

ayup... Saying "your statements make no sense" is something that I usually ignore (and have actually said, at times)

the fact that you followed it up with "but I am not surprised." **IS** rude, and childish.
Apparently, I need to now spell out HOW you are being rude, obnoxious and childish?
The implication is that you believe that nothing I ever say makes any sense and that you are expressing your contempt for my opinion in disagreeing with you.




And no... AFAIK, images are NOT included in base64 in the css...