Merge Identical CSS Rules

[Thasaidon]

I do not know if I have missed something (again).

I was editing an ePub yesterday The html was awful (stupidly convoluted) and I was simplifying it. As I was going through the "stylesheet", I noticed a lot of the defined styles were identical except for their names.

My immediate thought was "Doesn't the Removed Unused CSS Rules" fix this". I had run it on opening the ePub so I knew the option to Merge Identical CSS Rules option was ticked.

To check matters I created a dummy ePub which had several dozen pairs of styles which were identical except for their names. I also created an empty paragraph for each CSS style addimg class="dunnystylename" so each style was mentioned in the text.

I then ran the plugin. NONE of the identical CSS styles was merged.

I then repeated the operation with the Merge box unticked (just in case) and got the same result.

Has this feature been depreciated, is it a bug or is it my setop?

I am on Windows 10 Enterprise - 64bit, calibre version 5.1

[icallaci]

I believe doing an epub to epub conversion will merge identical classes. But I hope merging won't be incorporated into "Remove Unused CSS Rules." I sometimes use identical CSS rules with different names in different sections of an epub. I would prefer not to see a style named "dedication" or "toc" in the middle of a chapter where "center" makes more sense to my human brain.

[Thasaidon]

Originally Posted by icallaci

I believe doing an epub to epub conversion will merge identical classes. But I hope merging won't be incorporated into "Remove Unused CSS Rules." I sometimes use identical CSS rules with different names in different sections of an epub. I would prefer not to see a style named "dedication" or "toc" in the middle of a chapter where "center" makes more sense to my human brain.

Have a look in the Calibre editor. I think you will find the feature is already there BUT there is a checkbox to enable the feature. If you do not want to use that feature you do not have to.

I use ny own stylesheet with my own name for each style so do not care about the original style names.

[kovidgoyal]

Merging of rules merges rules that have identical selectors, not rules that have different selectors but identical properties.

[JSWolf]

To merge the same classes in CSS, load the eBook into the editor. Then from the tools menu, select Remove unused CSS rules. This will allow you to merge and also remove unused classes. You can deselect to remove unused classes and just merge if you want. But give how a lot of ePub can have hundreds of unused classes, I would not deselect to remove unused classes.

[Brett Merkey]

@Thasaidon:

Read the pasted thread below. It may be pertinent and has a regex that can work in your cleaning operation:

remove unused CSS rules
https://www.mobileread.com/forums/sh...d.php?t=322973

[Thasaidon]

I apologise I think I have misled some people as to what I was asking. I should have KISS'ed it (Keep It Simple Stupid)

Simply put, a CSS nay contain the following rules

.chapterHeader {
height: 60px;
border: 1px solid #000;
display: block;
margin-bottom: 20px;
background-color: #FFF
}

.chaprHd {
height: 60px;
border: 1px solid #000;
display: block;
margin-bottom: 20px;
background-color: #FFF
}

I expected Merge Identical CSS Rules to change this to something like

.chaprHd, chapterHeader {
height: 60px;
border: 1px solid #000;
display: block;
margin-bottom: 20px;
background-color: #FFF
}

i.e. To produce a stacked rule and delete the two original rules

From a very hazy memory of when this feature was introduced this is what I thought it did,

If I understand Kovid's answer to my rambling question , correctly, the answer is NO. It does not work like that.

If that is the case would a plugin or Regex guru would like to help.

The reason I would find this useful is in the bBook, I mentioned. It had over 1000 lines in the CSS, all used, which included duplicated rule sets, each having a unique Selector name.

Reducing clutter by having a smaller number of rule sets with stacked Selectors would be easier to follow.

I hope this clears up any confusion I causedr

[hobnail]

Originally Posted by Thasaidon

The reason I would find this useful is in the bBook, I mentioned. It had over 1000 lines in the CSS, all used, which included duplicated rule sets, each having a unique Selector name.

You're right, but don't hold your breath waiting for it. Implementing it would not be straightforward. One of them could have a semicolon after the FFF, another could have a space before or after one of the semicolons, the properties could be in a different order, one uses white, the other #fff, etc. These things could be handled but ... There's a lot of horrifying css and html out there (my favorite is when they have a span around every word).

One of my peeves is that when the classes are stacked like that, an unused class, for example your .chaprHd, isn't removed when it's not used in the html.

[Thasaidon]

Originally Posted by hobnail

There's a lot of horrifying css and html out there (my favorite is when they have a span around every word).

One of my peeves is that when the classes are stacked like that, an unused class, for example your .chaprHd, isn't removed when it's not used in the html.

I see. I thought it might be too big/difficult a job for anyone to wish to take on but thank you for confirming this and for everyone;s help.

The book I was talking about while not having a span round every word was very close to it.

[kovidgoyal]

https://github.com/kovidgoyal/calibr...9e6afa4802b587

[Thasaidon]

Originally Posted by kovidgoyal

https://github.com/kovidgoyal/calibr...9e6afa4802b587

Thank you Kovid.

Your generosity and ability to turn code around never ceases to amaze me. You have my deepest respect.

I bet the code is still dizzy from being turned around

[Brett Merkey]

Reducing clutter by having a smaller number of rule sets with stacked Selectors would be easier to follow.

Perhaps, in certain extreme cases. The real clutter that you describe in this case is actually in the HTML. A slightly cleaner CSS file cannot correct the tag soup in the structural code.

The book I was talking about while not having a span round every word was very close to it.

[Thasaidon]

Originally Posted by Brett Merkey

Perhaps, in certain extreme cases. The real clutter that you describe in this case is actually in the HTML. A slightly cleaner CSS file cannot correct the tag soup in the structural code.

Agreed.

You are free to disagree with my personal tastes

What I do with my books is to replace the code in the text files and the CSS file to something that suits me. From reading what people have said in the past in these forums I think many people do the same,

I identify those rules in the original CSS which relate to e.g. Chapter headings. Then remove the html round the headings in the text (spans, italic bold whatever) leaving just H1 or H2 tags Hi and h2 are selectors in my CSS.

In the example I gave I reduced the number of lines in the CSS from about a thousand to well below a hundred.

I like minimalist code and dislike huge numbers of almost identical rules that I think add nothing to the look of the book. The difference between some of these rules is often such that I find it difficult distinguish/impossible between them on the page. I just eliminate these (to me ) trivial, unnecessary differences and use a single rule for all of them.

Having the selectors stacked means I know, there are groups of selectors in the html that use the same ruleset. I do not have to search through the CSS file to find which rulesets are identical.

You may be right it may not help much but I have a lot of books that I want to change to my visual/coding tastes.

[Brett Merkey]

I identify those rules in the original CSS which relate to e.g. Chapter headings. Then remove the html round the headings in the text (spans, italic bold whatever) leaving just H1 or H2 tags Hi and h2 are selectors in my CSS.

Sounds like we do exactly the same thing. I want the books I read to visually exceed the "text dump" standard of modern publishers.

[hobnail]

I used to try and clean up the html but in my opinion it's more work than is necessary, for my needs. I now take a big sledgehammer and delete all of the original css and replace it with my minimal css as explained here. After "fixing" the css this way all that crap just stops creating problems (although it requires self discipline to not look too much at their horrid html). I'll still remove those spans that are around every word or the classless ones around paragraphs, and I bold the chapter titles when they use p tags instead of h tags.