What's Going on with this Class/Style?

[enuddleyarbl]

Can someone explain the point of the following class/style?

.element-container-single.element-type-also-by .heading .title-subtitle-block, .element-container-single.element-type-also-by .heading .title-subtitle-block .title-block, .element-container-single.element-type-also-by .heading .title-subtitle-block .element-number-block, .element-container-single.element-type-about-author .heading .title-subtitle-block, .element-container-single.element-type-about-author .heading .title-subtitle-block .title-block, .element-container-single.element-type-about-author .heading .title-subtitle-block .element-number-block {
  padding-top: 0;
}

Maybe I'm misunderstanding how these are supposed to work. But, I thought the various names (separated by commas) before the curly brackets were different ways of referring to the same formatting. So, if I'm reading that correctly, there are 6 different ginormous names for the same trivial bit of formatting (padding-top: 0). Why do that instead of just making a class called something like "notoppad"? Is it because w3c wants people to use semantically named classes instead of structural names?

In the current book I'm trying to reformat, I looks at a file that contains a couple of lines of simple text and the underlying formatting for it is a full page of wall-o-text. I can't figure out what the page is doing because all the formatting codes burn my eyes out and short-circuit my brain.

[Turtle91]

Most often those ridiculous class names are created by some automated software that is trying to interpret what the author wants...this is also mostly caused because authors don't properly set up their styles (and use them consistently) in said software.

You are perfectly correct to use human readable names so that you understand what it is doing. When I clean up some books that have been transformed by Calibre, the hardest part is figuring out what the difference is between Calibre3 and Calibre_3...lol Definitely not bashing Calibre software, I understand why it has to do that and it does a great job - it's just very difficult trying to edit a book when you can't easily tell what the class is doing when reading the HTML.

[DNSB]

Originally Posted by DaveLessnau

Can someone explain the point of the following class/style?

.element-container-single.element-type-also-by .heading .title-subtitle-block, .element-container-single.element-type-also-by .heading .title-subtitle-block .title-block, .element-container-single.element-type-also-by .heading .title-subtitle-block .element-number-block, .element-container-single.element-type-about-author .heading .title-subtitle-block, .element-container-single.element-type-about-author .heading .title-subtitle-block .title-block, .element-container-single.element-type-about-author .heading .title-subtitle-block .element-number-block {
  padding-top: 0;
}

Maybe I'm misunderstanding how these are supposed to work. But, I thought the various names (separated by commas) before the curly brackets were different ways of referring to the same formatting. So, if I'm reading that correctly, there are 6 different ginormous names for the same trivial bit of formatting (padding-top: 0). Why do that instead of just making a class called something like "notoppad"? Is it because w3c wants people to use semantically named classes instead of structural names?

If you look through the CSS, you are likely to find many of the names in multiple places. In your example, all the styles with padding-top: 0 are included. Another location might have all the styles with text-align: center or whatever else. For human use, I prefer individual style names with all the options which I find easier to read.

Yes, Vellum stylesheets are not meant to be humanly readable.

[JSWolf]

Vellum is GARBAGE at best.

[Quoth]

Calibre Editor though has a Rename class feature useful if you want meaningful names.

[KevinH]

And so does Sigil. That said, notice the space in many of the selector list entries. There are descendant css classes in play. So you might want to split that selector on the commas before renaming to be very safe.

[JSWolf]

What I tend to do with multiple CSS names with the same code is rename them to the same class name. It makes the HTML?CSS easier to deal with.

[enuddleyarbl]

I wasn't aware of Calibre Editor's rename feature. That sounds convenient. I'll look into that.

[Quoth]

Originally Posted by JSWolf

What I tend to do with multiple CSS names with the same code is rename them to the same class name. It makes the HTML?CSS easier to deal with.

Calibre Editor has a feature to remove unused CSS and combine identical CSS.
It will even remove redundant style files.
Then you can in any HTML file, find the 2nd etc names and use the rename feature globally.

[JSWolf]

Originally Posted by Quoth

Calibre Editor has a feature to remove unused CSS and combine identical CSS.
It will even remove redundant style files.
Then you can in any HTML file, find the 2nd etc names and use the rename feature globally.

Vellum is one of the worst offenders of crappy CSS where you may need to rename and get rid of the excess sludge.

[enuddleyarbl]

I had used the Calibre Editor's Remove Unused CSS tool and that cut the stylesheet down from about 1500 to 600 lines. I then went through the files and changed the classes bit by bit. At the end, I was back down to my standard set of classes (and it looks fine). At that point, I had to wonder if I would have just been better off mass deleting all of their classes and just applying my own to the bits and pieces that needed additional formatting. I suppose another alternative would be to set up a new, additional stylesheet and swapping the links to their stylesheet to mine. That way, I could have something to compare to or go back to if I had to.

[Tex2002ans]

Originally Posted by DaveLessnau

I then went through the files and changed the classes bit by bit. At the end, I was back down to my standard set of classes (and it looks fine). At that point, I had to wonder if I would have just been better off mass deleting all of their classes and just applying my own to the bits and pieces that needed additional formatting.

I described my "clean up very dirty documents" methods in extreme detail:

• 2021: "Adding a limited Automate Feature To Sigil" (Post #92+)

It works by:

• Multiple rounds of Calibre EPUB->EPUB conversions
  
  • while stripping down more and more of the "useless" CSS.
• Using Diap's Editing Toolbag
  
  • Convert <span class="calibre123"> -> <i>.
    
  • + Remove lots of the superfluous <span>s.
    

* * *

Great news though!

More advanced cleanup tools WILL BE coming to Sigil soon!

After describing my methods in that late-2021 topic, for months, the stuff was nibbling away at me, so I consolidated my decade of ebook-conversion knowledge and proposed ideas to KevinH.

Here's 2 of the advanced tools that are being worked on:

• CSS Consolidator
  
  • Or "CSSToolbox", or whatever the official name is going to be.
• Advanced (List-based) Search/Replace
  
  • Similar to current Spellcheck Lists (Tools > Spellcheck > Spellcheck).

See this post where I describe some of the use-cases in extreme detail:

• 2021: "Possible To-Do List for Future Sigil Releases Post Sigil 1.8" (Post #2)

CSSToolbox

This will allow you to find/detect—and merge—exact/similar classes together:

Spoiler:

Before

<p>An <span class="normal">example</span>
where <span class="class98">there</span>
are <span class="class99">similar</span>
and <span class="class100">classes</span>.</p>

CSS:

.normal {
	font-size: 1em;
}

[...]

.class98 {
	font-size: 1em;
}

.class99 {
	font-size: 1.1em;
}

.class100 {
	font-size: 1em;
	color: black;
}

After

<p>An <span class="normal">example</span>
where <span class="normal">there</span>
are <span class="normal">similar</span>
and <span class="normal">classes</span>.</p>

CSS:

.normal {
	font-size: 1em;
}

Right now, "Remove Unused CSS" only works on CSS that isn't used at all.

This will allow you to take the next step:

• Merging multiple CSS classes that are "the same" or "pretty close" to each other.
• Taking that fantastic "Right-Click > Rename class" trick, and handling multiple of those for you.
  
  • 4 different classes into a "normal" class? Just check the boxes, and they'll all be renamed/merged together fine.
    
  • Right now, you have to do them one-by-one, and you can easily make mistakes.
    

Side Note: And the Calibre EPUB->EPUB method changes almost everything into "calibre###" classes. This method will keep names in tact.

* * *

Advanced Find/Replace (List-based)

This will allow you to:

• Use Regex.
• Search/sort through results like Tools > Spellcheck.

Spoiler:

Like this regex could "find all Dialogue Tags within a fiction book" + replace with "said":

Find: ,” \b(Alex|Bob|Joanne|Suzie|s*he|they)\b (\w+)
Replace: ,” \1 said
Filter:

Found              | Replace        |  Hits
___________________|________________|______
,” Alex opined     | ,” Alex said   |    10
,” Suzie accused   | ,” Suzie said  |     9
,” Joanne agreed   | ,” Joanne said |     4
,” Alex explained  | ,” Alex said   |     2
,” Alex ejaculated | ,” Alex said   |     1
,” she beseeched   | ,” she said    |     1

Then you could filter the list. Like only searching for "Alex":

Filter: Alex

Found              | Replace        |  Hits
___________________|________________|______
,” Alex opined     | ,” Alex said   |    10
,” Alex explained  | ,” Alex said   |     2
,” Alex ejaculated | ,” Alex said   |     1

And you could selectively apply Find/Replace ONLY on specific rows:

Found              | Replace        |  Hits
___________________|________________|______
,” Alex opined     |                |    10
,” Alex explained  |                |     2
,” Alex ejaculated | ,” Alex said   |     1

or sort the columns:

v Found            | Replace        |  Hits
___________________|________________|______
,” Alex ejaculated | ,” Alex said   |     1
,” Alex explained  |                |     2
,” Alex opined     |                |    10

and/or you could double-click on a row, and jump to its exact location in the EPUB (like Spellcheck Lists!).

This will allow you to visually see all before/after changes in a single menu, and you could selectively apply.

* * *

These tools will greatly speed up all sorts of workflows.

And who knows what other tricks and methods we'll come up with after people begin messing around with it.

[JSWolf]

Originally Posted by Tex2002ans

• 2021: "Possible To-Do List for Future Sigil Releases Post Sigil 1.8" (Post #2)

I'm going to disagree with you here (sort of). You example has a font size of 1.1em being changed to a font size of 1em. That sort of thing should never happen. I can see the classes where the font sizes match, but when they don't, don't have the program assume. Similar is not the same and you could be blowing away code you actually want to keep.

[Turtle91]

Originally Posted by JSWolf

I'm going to disagree with you here (sort of). You example has a font size of 1.1em being changed to a font size of 1em. That sort of thing should never happen. I can see the classes where the font sizes match, but when they don't, don't have the program assume. Similar is not the same and you could be blowing away code you actually want to keep.

I'm also going to agree with Jon here (sort of)
I honestly didn't read all of Tex' post (only so many hours in the day... ), but I definitely know of circumstances where you would want a font-size of 1.1em. This definitely would not be for the whole book, only specific sections.

For example, if the book font is generally a sans-serif and I want a section to be serif, then I'll give the serif section a slightly larger font-size. The standard serif fonts I work with tend to be slightly smaller than the sans- so I need to bump the size up slightly to even up the look.

Conversely, I will usually reduce the font-size whenever I use <strong> {font-weight:bold; font-size:.9em} (or maybe .95em) to make it fit a little better with the rest of the words.

And yes, Jon, I do use <strong> especially in things like a glossary...the term is strong and the definition is normal...I usually put it in a hanging indent.

<div class="hang">
  <p><strong>term -</strong> term details</p>
  <p><strong>term -</strong> term details</p>
  <p><strong>term -</strong> term details</p>
</div>

...and also yes, I know that the better semantic elements would be <dl><dt><dd> but this is an example...

[Tex2002ans]

Originally Posted by JSWolf

I'm going to disagree with you here (sort of). You example has a font size of 1.1em being changed to a font size of 1em. That sort of thing should never happen. I can see the classes where the font sizes match, but when they don't, don't have the program assume. Similar is not the same and you could be blowing away code you actually want to keep.

It was just a simple, basic example. Didn't want to overwhelm with advanced ones. It could have easily been:

font-size: 16px;

and

font-size: 17px;

The point was recognizing two classes which are not exactly the same, but extremely close to each other.

- - - - -

Side Note: If you wanted advanced examples + a breakdown of every category under the sun, see Post #92+ in that "Adding limited features" thread.

I described every case, using real-life code... and I even color-coded it for you.

Straight out of Word/InDesign, you typically get messes like this:

Spoiler:

p.Block-indent {
	color:#000000;
	font-family:"Minion Pro Medium", sans-serif;
	font-size:0.917em;
	font-style:normal;
	font-variant:normal;
	font-weight:normal;
	orphans:2;
	page-break-after:auto;
	page-break-before:auto;
	text-align:justify;
	text-decoration:none;
	text-indent:0;
	text-transform:none;
	widows:2;
}

p.Body-text {
	color:#000000;
	font-family:"Minion Pro Medium", sans-serif;
	font-size:0.917em;
	font-style:normal;
	font-variant:normal;
	font-weight:normal;
	orphans:2;
	page-break-after:auto;
	page-break-before:auto;
	text-align:justify;
	text-decoration:none;
	text-indent:18px;
	text-transform:none;
	widows:2;
}

You think indents are important? Okay, then don't merge the classes together.

You think that difference is irrelevant? Merge them.

The great thing about this newer method is you can easily:

• Compare all classes to each other.
  
  • A "closeness score" from 100 (exactly the same) to 0 (nothing the same).
    
  • Highlight different lines.
    
• + Check a box and merge those classes together.

Originally Posted by Turtle91

I honestly didn't read all of Tex' post (only so many hours in the day... ),

How dare you not read every word? Make more hours!!!

Originally Posted by Turtle91

For example, if the book font is generally a sans-serif and I want a section to be serif, then I'll give the serif section a slightly larger font-size.

Good thing you'll be able to ignore or pay attention to whatever you want!

• Think margins are useless? Great!
• Think fonts are useless? Great!
• Think colors are useless? And you don't want 50 different shades of gray? Great!

Want to read more details? Great!

Go read the thread above. I explain it all!

Originally Posted by Turtle91

I'm also going to agree with Jon here (sort of)

If I changed the example, then Jon would've inevitably swooped in to rant about:

"Don't you know how bad pixels are for font size?"

- - -

Anyway, all you need to know is:

Soon, there will be yet another tool in the toolbelt!

• "Remove Unused CSS" gets rid of all the unused stuff.
• "Consolidate CSS" will help clean up all the leftovers!

Me+KevinH are both figuring out a way to handle this better than ever before.

But, for now, you'll have to keep doing the ol', crappy, manual way.