CSS - How big is TOO big?

[grannyGrumpy]

When I've converted books, the CSS usually ends up with 30 - 40 items (those books have illustrations, drop-caps, quoted letters & publications, embedded fonts, and sometimes tables).
My current project already has over 90 CSS items (lots of short stories with lots of different layout needs), and likely to increase.

Should this be a concern? Ought I to start finding ways to pare it down?

Am I worrying for no reason at all?

[PageLab]

I think performance should always be a concern. eReaders generally aren't really powerful machines. A tidy CSS is desirable, for sure, but you should verify the size of your HTML files too. If they are too big, performance will suffer a lot.

To achieve maximum performance, it helps to optimize your code with tools like HTML Compressor, CleanCSS, or Helium.

[grannyGrumpy]

So far I have always worked with Sigil (code the tags in Notepad++ first because I customized the syntax coloring, using a lot of autohotkey scripting for auto-typing).
I always make a separate file for each chapter / story, so that keeps the file size down.

I will give those tools a try and see what happens. Thanks for the suggestions.

What I also need to find out is if there is a recommended maximum number of classes in a CSS. One thing that is a contradicting issue is that everyone says "don't use empty paragraphs with nbsp;, style a div or a paragraph to make a larger top margin." But maybe I only need that style one time, and further down the page I need a different one-time style, etc. And before I know it, I have a dozen styles with one-time use. (well, not all for top margins, but just in general). Any advice for that scenario?

[DSpider]

Originally Posted by grannyGrumpy

I have a dozen styles with one-time use. (well, not all for top margins, but just in general). Any advice for that scenario?

Either style them with a master CSS file, or with multiple CSS files, one per each chapter.

Personally, I don't think even the weakest e-reader will have problems with a long CSS file, because it's only loaded when the chapter (the HTML or XHTML file) is loaded, not on each page turn. It can affect page turn only if the chapter is really long (over 300 KB), or chuck full of images. But this is entirely dependant on the e-reader. Some of them pre-cache the next file.

[DiapDealer]

Originally Posted by grannyGrumpy

And before I know it, I have a dozen styles with one-time use. (well, not all for top margins, but just in general). Any advice for that scenario?

Make classes for common scenarios (top margins, left margins, italics, etc...) and then stack them with other classes as necessary (elements can have more than one class). Or make judicious use of the '+' CSS operator to handle special situations rather than creating a ton of classes that only get used once.

[PageLab]

Regarding the use of empty paragraphs: it's good practice to remove them because this separates presentation from structure in your content, and keeps everything related to visual presentation in one place – your CSS. Also, that empty line could be interpreted by screen readers like JAWS, which can be used to read aloud ePUB content in Adobe Digital Editions.

[grannyGrumpy]

@DSpider, I do use a master CSS, but this one is getting bigger than I have been used to, and getting hard to remember and use the different bits. I used to try doing individual CSS on each file, but it was so much hassle to edit.

@DiapDealer, I have recently started to use the "+" operator, but I'm not too well-versed on stacking. I've copied some from the gurus' books in the library, and adapted them for my own use, but don't really have a handle on how it works. Do you have a recommendation for a link with tutorial or more information?

@PageLab - I"m trying to be a good little granny and not use empty paragraphs, but golly, they are so tempting sometimes. So far, I've resisted.

Thanks guys, for the input. Much appreciated.

[Ti-Ron]

Originally Posted by DSpider

(...) with multiple CSS files, one per each chapter.

We can do that!?!?!?!?!

THANKS A LOT for opening my eyes. This is really helpful for my project right now!

[DSpider]

Of course. Just define them in the HTML/XHTML file before the <body> tag.

For example:

<?xml version="1.0" encoding="utf-8" standalone="no"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Chapter-5.html</title>
  <link href="../Styles/template_5.css" rel="stylesheet" type="text/css" />
</head>

<body>
...

[Ti-Ron]

Now that I see it, it's as clear as water, but I didn't think of this solution before!!!!
Thanks for the head's up!

[theducks]

You can also use more than 1 in the same document:

<head>
  <title>Chapter-5.html</title>
  <link href="../Styles/standard.css" rel="stylesheet" type="text/css" />
<link href="../Styles/template_5.css" rel="stylesheet" type="text/css" />
</head>

'standard' is the general' css
and template 5 is the additional styles needed for this document.
IIRC if a selector duplicates previously defined one (in standard), the last style found is used, so you could even override 'standard'

[Ti-Ron]

Woah, there's a world of possibility!

I know, I know I'm only an ePub Padawan! "A lot to learn, I have."

[graycyn]

I think I just learned something too! I was also concerned about my CSS getting too long, but adding stylesheets for specific chapters had not occurred to me. World of possibilities indeed!

[mrmikel]

It occurs to me that splitting them up could help the e-readers processing a little. It could keep it from having to process/store a lot of extraneous material that doesn't apply to a particular chapter.

[exaltedwombat]

You can always use inline style code for one-off formatting requirements.

But DON'T GET COMPLICATED! If your book is going to be any use, it must work on a range of devices. For instance, the Nexus 7 is becoming very popular. A commonly-chosen eBook reader for it, Aldiko, seems to ignore quite a lot of stylesheet instructions. It's often best to simply pour in your text, surround it by <p> tags, and let the device decide how it displays.