A proposal: help sorting css stylesheet

[roger64]

Hi

When we try to tweak some EPUB, we frequently have to deal with long and confuse stylesheet, sometimes made up with aggregates built differently.

I wish this could be done within the Calibre Editor. There is an "unofficial" Calibre plugin about it (Sort CSS.zip).

I wish I had a menu entry in the Editor which would complement the "beautify" tool and help me sort cleanly the stylesheet. This way I could also easily spot duplicates.

The sorting rule would take care of the nature of the items and then use alphabetic order (what else?)
1. elements (with @ elements coming first like @page or @font-face). If several elements are grouped, the first one determine its alphabetic place.
If elements (like p) have several selectors, these also would be sorted out alphabetically.

2. class selectors (beginning with a coma)
If the pertaining element is left unspecified, the class selectors shoud be placed after all the elements.

3. ids (beginning with a #)

I think this way we could sort at least 95% of the content of any stylesheet

4. . ?

[kovidgoyal]

Since there is already a plugin to do that, why do you need builtin functionality? Plugins are perfectly capable of adding buttons to the editor UI.

[roger64]

Originally Posted by kovidgoyal

Since there is already a plugin to do that, why do you need builtin functionality? Plugins are perfectly capable of adding buttons to the editor UI.

Because the plugin, though its age (two, three years?) is far from complete and can't do what's is described. And it's not "official" (so not really reliable).

[JSWolf]

[QUOTE=roger64;3386203]Hi

When we try to tweak some EPUB, we frequently have to deal with long and confuse stylesheet, sometimes made up with aggregates built differently./quote]

The first thing to do is remove unused CSS classes. Calibre does it best as it also removed unused CSS classes from the HTML code. Then you can see what's left. By removing unused CSS classes, you can take a CSS file with many classes that looks unwieldy and make it into something a lot easier to deal with.

[davidfor]

Originally Posted by kovidgoyal

Since there is already a plugin to do that, why do you need builtin functionality? Plugins are perfectly capable of adding buttons to the editor UI.

The plugin is one I knocked up quickly when you first enabled plugins in the editor. I had completely forgotten about it until recently.

It does a very simple sort on the selectors. I started work on a more intelligent sort, but didn't continue. What I started was something like what roger6 is asking for. I think I hit some issues with the how to do organise the selectors, and as it wasn't something I was really interested in, I stopped.

I might return to it, but, there are lots of other things I'm more interested in. If someone else wants to take it up, I'd be happy to hand it over.

[kovidgoyal]

I dont see how you can sort CSS rules at all, in the general case. For example,

.class2 { color: red}
.class1 { color: green}

If you sort that to

.class1 { color: green}
.class2 { color: red}


You will have changed the color of any element that has both those selectors apply to it. Before the sort, it would be green, after the sort it would be red.

This is because the specificity of a selector depends on its position in the stylesheet with respect to other selectors.

[davidfor]

And that's one of the other problems. If used very carefully, it's probably OK, but it could easily mess things up.

[roger64]

Hi

There are for example use cases when you add a custom stylesheet to be able to edit quickly any ebook. Once the work is done, once the unused rules have been deleted, you may wish to unify and clean the style sheet.

We already can do it joining together two different stylesheet using the Calibre Editor. To day, this is done mainly putting the text of the second one under the text of the first one. However the end result usually looks like a mess even if it's not...

If some kind of sorting allows you to detect duplicates, I think it will be a progress. It will be useful practically even if it can trigger 0.001% of mistakes of the kind you referred to.

[Terisa de morgan]

The actual sorting allows you to detect duplicates. It doesn't avoid you a manual movement later but that is a minor annoyance. My OCD is more annoyed by alpha sort instead of numeric sort after "calibre", but I can live with that.

[JSWolf]

Originally Posted by kovidgoyal

I dont see how you can sort CSS rules at all, in the general case. For example,

.class2 { color: red}
.class1 { color: green}

If you sort that to

.class1 { color: green}
.class2 { color: red}


You will have changed the color of any element that has both those selectors apply to it. Before the sort, it would be green, after the sort it would be red.

This is because the specificity of a selector depends on its position in the stylesheet with respect to other selectors.

I don't see how the sorted version is an issue? class1 is still green and class2 is still red.

[jackie_w]

Originally Posted by JSWolf

I don't see how the sorted version is an issue? class1 is still green and class2 is still red.

I think Kovid was referring to the situation where the HTML is

<p class="class2 class1">This text should be green</p>

After the sort that text would be red because class2 would come after class1 in the stylesheet but the HTML wouldn't have changed.

[theducks]

One of the reasons I use Sigil is CSS sorting is NOT needed. It has a Goto link or style that works in most cases, even when there are multiple stylesheets in the book.

Cases where it (Sigil) does not work perfectly

doubly (or more) defined: it goes to first found
Defined in more than one sheet. Goes to the one in the First Linked sheet

the case Jackie_W shows has even bigger issues, 'Delete unused styles' will REMOVE the second style as unused
NB Sigil also destroys @Amazon type CSS entries

CLEAN and sorting should always be used with care (and a prior save)

The Report tool may help you decide. But there are so many 100% valid (HTML and CSS usage) cases that automation will never get it 100%

[kovidgoyal]

Originally Posted by theducks

One of the reasons I use Sigil is CSS sorting is NOT needed. It has a Goto link or style that works in most cases, even when there are multiple stylesheets in the book.

So does calibre, in fact calibre has Live CSS which includes that function and is much more powerful, in that it shows you all the CSS style rules that apply to the current html element you are editing as you edit.

[theducks]

Originally Posted by kovidgoyal

So does calibre, in fact calibre has Live CSS which includes that function and is much more powerful, in that it shows you all the CSS style rules that apply to the current html element you are editing as you edit.

Another case where Calibre just does it differently and I just did not figure it out

I looked at Live CSS and went ???, this seemed like another 'Inspector' (which I use when I just can't figure WHY I am getting the results

Thanks again

[kovidgoyal]

Note that you can click on the stylesheet names in blue in the Live CSS Panel. This allows you to edit the relevant CSS file, with the cursor pre-positioned at the rule definition as well. It even works for rules defined inside <style> tags and style attributes.