CSS - How big is TOO big?

GrannyGrump · 11-25-2012, 10:59 PM

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 · 11-26-2012, 06:29 AM

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.

GrannyGrump · 11-26-2012, 07:21 AM

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 · 11-26-2012, 08:21 AM

Quote:

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 · 11-26-2012, 08:39 AM

Quote:

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 · 11-26-2012, 08:41 AM

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.

GrannyGrump · 11-26-2012, 10:31 AM

@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 · 11-29-2012, 08:45 AM

Quote:

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 · 11-29-2012, 01:51 PM

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

For example:

Code:

<?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 · 11-29-2012, 02:10 PM

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 · 11-30-2012, 10:40 AM

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

Code:

<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 · 11-30-2012, 11:57 AM

Woah, there's a world of possibility!

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

graycyn · 12-08-2012, 05:43 AM

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 · 12-08-2012, 06:45 AM

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 · 12-08-2012, 12:25 PM

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.

11-25-2012, 10:59 PM	#1
GrannyGrump Obsessively Dedicated... Posts: 3,200 Karma: 34977896 Join Date: May 2011 Location: JAPAN (US expatriate) Device: Sony PRS-T2, ADE on PC	CSS - How big is TOO big? 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?

11-26-2012, 10:31 AM	#7
GrannyGrump Obsessively Dedicated... Posts: 3,200 Karma: 34977896 Join Date: May 2011 Location: JAPAN (US expatriate) Device: Sony PRS-T2, ADE on PC	@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. Last edited by GrannyGrump; 11-26-2012 at 10:47 AM.

11-30-2012, 10:40 AM	#11
theducks Well trained by Cats Posts: 29,782 Karma: 54830978 Join Date: Aug 2009 Location: The Central Coast of California Device: Kobo Libra2,Kobo Aura2v1, K4NT(Fixed: New Bat.), Galaxy Tab A	You can also use more than 1 in the same document: Code: <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'

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Why did the Big Publishing Houses get so big?	fjtorres	General Discussions	25	11-13-2012 12:15 PM
Willing to answer questions of publishing - small press, big-six, and big-six.	MichaelSullivan	Writers' Corner	31	08-21-2012 04:10 PM
Saying Hi and also a big thank you!	paratwa	Introduce Yourself	5	05-10-2011 12:32 AM
Hi from Big D	bthurman	Introduce Yourself	5	01-08-2010 08:13 AM
big hello and big hug	dongdongliushui	Introduce Yourself	5	07-16-2009 02:44 PM

11-26-2012, 06:29 AM	#2
PageLab Connoisseur Posts: 70 Karma: 515184 Join Date: Sep 2011 Location: Brasília Device: Kindle3, iPad, Nook, Kobo, Positivo Alfa	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.

11-26-2012, 07:21 AM	#3
GrannyGrump Obsessively Dedicated... Posts: 3,200 Karma: 34977896 Join Date: May 2011 Location: JAPAN (US expatriate) Device: Sony PRS-T2, ADE on PC	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?

11-26-2012, 08:41 AM	#6
PageLab Connoisseur Posts: 70 Karma: 515184 Join Date: Sep 2011 Location: Brasília Device: Kindle3, iPad, Nook, Kobo, Positivo Alfa	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.

11-29-2012, 02:10 PM	#10
Ti-Ron Connoisseur Posts: 80 Karma: 1023042 Join Date: Nov 2011 Device: Kobo Touch, iPad	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!

11-30-2012, 11:57 AM	#12
Ti-Ron Connoisseur Posts: 80 Karma: 1023042 Join Date: Nov 2011 Device: Kobo Touch, iPad	Woah, there's a world of possibility! I know, I know I'm only an ePub Padawan! "A lot to learn, I have."

12-08-2012, 05:43 AM	#13
graycyn Wizard Posts: 1,496 Karma: 11250344 Join Date: Aug 2010 Location: NE Oregon Device: Kobo Sage, Forma, Kindle Oasis 2, Sony PRS-T2	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!

12-08-2012, 06:45 AM	#14
mrmikel Color me gone Posts: 2,089 Karma: 1445295 Join Date: Apr 2008 Location: Central Oregon Coast Device: PRS-300	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.

12-08-2012, 12:25 PM	#15
exaltedwombat Guru Posts: 878 Karma: 2457540 Join Date: Nov 2011 Device: none	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.

Advert

Advert