remove unused CSS rules

[rjwse@aol.com]

I just noticed that when there is an unused class sometimes it will not be removed. Is that because it is in a comma series?

ol, .someunusedclass, ul {
font: 0.75em/1.2 "Ubuntu";
background-color: khaki;
display: inline-block;
width: 100%;
}

Best regards, Pop

[Brett Merkey]

Yes, when CSS selectors are "stacked" in the comma separated form, the "remove unused rules" tool does not work. I use a regex to separate out the rules:

--unstack selectors so Calibre "Remove unused rules" tool can be used:

Search: ([.]?[^ ]+),\s([^{]+)(\{[^}]+\})
Replace: \1 \3\n\n\2\3

'Replace All' until 0 returns. Clean CSS, then restack or replace class selectors. Apply early in edit session.

[kovidgoyal]

remove unused classes removes class from class attributes in tags not classes from style rule selectors. Since that rule is used presumbaly because you have ol or ul tags in your book, it wont be removed.

[Brett Merkey]

Since that rule is used presumbaly because you have ol or ul tags in your book, it wont be removed

The "remove" tool cannot be relied upon with stacked selectors.
TEST:
1) create stacked selector rules where clearly none are used. The tool removes ALL rules in whatever class/tag form.
2) add a rule into this stack that is clearly used. Run the tool. NONE of the selectors are removed.

So if a stack of bad selectors contains one good selector, the ruleset is not cleaned. NO selectors are removed. The selectors have to be unstacked before the tool is applied.

[kovidgoyal]

Its a remove unused CSS tool not a remove unused selectors tool.

[rjwse@aol.com]

Thanks for the info, everyone. I put Brett Merkey's regex into my "saved searches" and tried it out. It works good. As you may notice from the screenshot I am overzealous using comma-separated items. Best regards, Pop

[JSWolf]

Personally, I dislike multiple classes put together even if the CSS code is the same. I's cleaner and neater to do it one at a time. That also give the advantage if you need to change one of the classes, you can very easily. And if you sort the classes alphabetically, they will be sorted in the correct order.

I'm not a fan of some CSS shortcuts such as stacking classes and margin:.

[Brett Merkey]

@ JSWolf

I agree with you on stacking selectors. But...

And if you sort the classes alphabetically...

Sorting a well-constructed stylesheet is the fastest way of destroying it. You can construct a smaller, more flexible, more powerful stylesheet by working with the cascade. I know that Calibre has a tool to alphabetize selectors but perhaps it is good that the tool is fairly well hidden.

[Terisa de morgan]

Originally Posted by Brett Merkey

@ JSWolf

I agree with you on stacking selectors. But...



Sorting a well-constructed stylesheet is the fastest way of destroying it. You can construct a smaller, more flexible, more easily modifiable stylesheet by working with the cascade. I know that Calibre has a tool to alphabetize selectors but perhaps it is good that the tool is fairly well hidden.

I disagree, trust on the css order (or any order) is a very nice way to doom your book.

[JSWolf]

Originally Posted by Brett Merkey

@ JSWolf

I agree with you on stacking selectors. But...



Sorting a well-constructed stylesheet is the fastest way of destroying it. You can construct a smaller, more flexible, more powerful stylesheet by working with the cascade. I know that Calibre has a tool to alphabetize selectors but perhaps it is good that the tool is fairly well hidden.

I highly dislike any CSS that requires it to be in a specific order. There's no need of it. It's best to use classes in the code instead of stacking so classes are not needed.

Trying to shorthand can come back to bite you. For example, using margin: instead of say margin-left: etc. can bit you if it's on an older nook.

Just do it all long form and you'll be better off.

[theducks]

even with a stacked CSS
a later selector can override the prior declaration. The later one may be for just 1 attribute.

.CO {text-indent: 0}

Alphabetizing or deleting prior selectors may alter the results. remember it is Css.

Granted, Wolf's Way, is easier to troubleshoot, but it is not the only way.

blockquote p {

[rjwse@aol.com]

I was completely smitten by the brevity of the descendant combinator such as:

<style>
.dash {list-style: none;}
.dash li:before { content: " — "; margin-left: -2em;}
</style>

This puts a dash instead of a number or a bullet in front of <li> if surrounded by either <ol> or <ul>.

You can even use * to denote any tag enclosed by the class:
<style>
.whatever * {
do:this; do:that;
}</style>

I'm confused on how combinators, tags, and classes get put into alphabetical order.

Best regards, Pop

[Brett Merkey]

I'm confused on how combinators, tags, and classes get put into alphabetical order.

Good question. If you are asking about how to access the tool within Calibre, well, it is mercifully hidden within the Edit > Preferences menu within the Calibre Edit module.
If you are asking what alphabetical order means within a potential zoo of combinators, contextual selectors, pseudo-classes and pseudo-elements, then a lot of head-scratching awaits you when you actually test the tool.

Take a very simple contextual selector as an example: it is obvious that rules for blockquote will come before body in a sorted sheet. But where does the contextual selector blockquote p (styling paragraphs within a blockquote) reside in the sort? Hint: nowhere near blockquote.

Sorting a sheet may be of use if you are dealing with a huge jumble of CSS and you need to find something — but that something you want to find needs to be real simple and you need to remember to unsort immediately to retain control of the cascade.

[rjwse@aol.com]

When the stylesheet.css is onscreen in the editor you can use the A-Z alphabetizing icon to reorder the stylesheet. I use it all the time with a different philosophy of intent. I prefer the cascade of instructions to (1) begin in the stylesheet (completely independent of order), (2) be overridden by a style command (if present) at the top of each .xhtml segment, (3) finally, be overridden in the text with class="" or style="" in individual tags. For some reason, I have come to think I have made some sort of mistake if the commands in the stylesheet are dependent on their alphabetical place. Still, I am perplexed how the alphabet rules work. Best regards, Pop