Is this css too complex? can it be condensed?

HTML & CSS
1

Hi All.

Is this css too complex and have I over-thought it…

most of the borders and backgrounds are there for testing so I can see where everything is place etc. It just seems a large amount of code for a simple layout.

Cheers
Chris


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
#resultsDiv
	{
		min-height:200px;
		padding:10px;
		border: 1px solid #000;
		width:600px;
	}
#resultsDiv .thumbnail
	{
		padding:10px;
		height:170px;
		width:140px;
		border: 1px solid #000;
	}

#resultsDiv .ratings
	{
		padding-left:10px;
		height:30px;
		width:140px;

	}
#resultsDiv h3
	{
		padding-right:10px;
		padding-top:10px;
		width:420px;
		margin:0;
		background: pink;
	}
	
#resultsDiv .subContent
	{
		padding-right:10px;
		padding-top:3px;
		width:420px;
		min-height:117px;
		font-family:Verdana, Geneva, sans-serif;
		font-size:10px;

	}
#resultsDiv .information
	{
		width:420px;
		padding-right:10px;
		border: 1px solid #000;
	}
	
#resultsDiv .visuals{float: left; }
#resultsDiv h3, #resultsDiv .textual{float:right; clear: right;background:#ccc;}

#resultsDiv h3	{background: pink;}


#resultsWrapper
	{
		width:620px;
		border: 1px solid #000;
		padding:10px;
	}
#moreInformation
	{
		min-height:470px;
		border: 1px solid #000;
		width:600px;
		padding:10px;
		
	}
	
#miVisuals
	{
		float:left;	
	}
#miTextual
	{
		float:right;
		clear:right;
		border: 1px solid #000;
		min-height:200px;
	}
#moreInformation .miThumbnail
	{
		padding:10px;
		height:170px;
		width:140px;
		border: 1px solid #000;
	}
#moreInformation .miProfile
	{
		padding:10px;
		min-height:250px;
		width:140px;
		border: 1px solid #000;
	}
#moreInformation .bitopadding
	{
		padding-top:5px;
	}
	#miTextual h3
	{
		padding-right:10px;
		padding-top:10px;
		width:420px;
		margin:0;
		background: pink;
	}
#miTextual .subContent
	{
		padding-right:10px;
		padding-top:3px;
		width:420px;
		min-height:380px;
		font-family:Verdana, Geneva, sans-serif;
		font-size:10px;
		background-color:#0F0;

	}
#miTextual .information
	{
		width:420px;
		padding-right:10px;
		border: 1px solid #000;
		min-height:32px;
	}
</style>
</head>

<body>
<div id="resultsWrapper">
<div id="resultsDiv">
	<h3>This is the article Title</h3>	
	<div class="visuals"><div class="thumbnail">thumbnail</div></div>
	<div class="textual">
	<p class="subContent">Ut ac magna arcu. Vivamus vitae lacus dictum tortor viverra suscipit. Curabitur sit amet lacus odio, vel pellentesque turpis. Nulla tempor venenatis turpis, elementum rutrum nibh tempor nec. Mauris porttitor porta magna, quis iaculis erat convallis vel. Phasellus sit amet ultricies risus. Nulla nunc lectus, convallis non porttitor a, hendrerit id tortor. Curabitur vel nulla at lacus eleifend vulputate</p>
	<div class="information">This is the information div</div>
    </div>
</div>
<div id="moreInformation">
<div id="miVisuals">
<div class="miThumbnail">thumbnail</div>
<div class="bitopadding"></div>
<div class="miProfile">profile information</div>
</div>
<div id="miTextual">
<h3>More Information</h3>
<p class="subContent">Ut ac magna arcu. Vivamus vitae lacus dictum tortor viverra suscipit. Curabitur sit amet lacus odio, vel pellentesque turpis. Nulla tempor venenatis turpis, elementum rutrum nibh tempor nec. Mauris porttitor porta magna, quis iaculis erat convallis vel. Phasellus sit amet ultricies risus. Nulla nunc lectus, convallis non porttitor a, hendrerit id tortor. Curabitur vel nulla at lacus eleifend vulputate</p>
<div class="information">This is the information div</div>
</div>


</div>
</div>


</body>
</html>
2

Well obviously some things could be condensed, like on #resultsDiv h3, you can shorten the padding rules to padding:10px 10px 0 0; but that’s just little things.

It seems like you have a lot of empty divs, are you planning on adding content to those sections later on? If not, you’ll find you can remove them.

3

I just loaded your site locally and found the css-style-sheet to be 3,624 bytes.

http://subdomain.johns-jokes.com/assets/css/style.css

Take a look at how I use one style sheet (3,599 bytes) for about a dozen different dynamic pages layouts:

http://subdomain.johns-jokes.com/assets/css/style_calendar.css

and also the above additional style-sheet (2,494 bytes) for the calendar.

4
  1. It’s not always good to try to “compress” your CSS. You have to keep in mind how it will affect your ability to edit later, etc.
  2. One thing I see is that empty div.bitopadding?!?!. get rid of it and the declaration in the CSS. Apply margin-bottom:5px; to .miThumbnail instead.
  3. You could concatenate common LOGICAL styles into ONE rule. For EXAMPLE: instead of putting {width:420px; padding-right:10px;} in various rules you could just do it ONCE like this:

#miTextual .information, #miTextual .information, #miTextual h3, .etc {width:420px; padding-right:10px;}

this is not only more streamlined but it has the added advantage that if you ever chose to change the width and padding-right for that column it can be one in ONE change instead of 3 or 4 or 5…

5

It’s not soo much that the css is too complex, as it’s too specific. You can gain a lot by making your structures more generic, and applying to generic classes, overriding with ids as needed. I looked at your markup, and there were a number of areas which were essentially identical - thumbnail, information, etc. So what I did was remove the cruft from the markup, and styled generically - elements first, then classes, then id specific. What this does is apply consistency to the visuals, while still allowing you to override where needed (the green color in the “more information” for example). You’ll see with comments in the html, the overall markup is about 1/2 what it was before.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
 /* element specific styles */
 body { 
  font-family:Verdana, Geneva, sans-serif;
  font-size: 10px;
 }
 h3 { background: pink; padding-top: 10px; padding-left: 10px; font-size: 2em;}
 p { padding: 10px; }
 /* class styles */
 .thumbnail
  {
   float: left;
   padding:10px;
   height:170px;
   width:140px;
   border: 1px solid #000;
  }
 .textual{ margin-top: -20px; margin-left: 170px; background:#ccc;}
 .information {
   margin: -1em 1px 0 170px; /* allow for border on each side... */
   border: 1px solid #000;
   padding: 1em 10px;
 }
 .profile
 {
  float:left; clear: left;
  margin-top: 10px;
  padding:10px;
  min-height:250px;
  width:140px;
  border: 1px solid #000;
 }
 
 /* id styles */
 #resultsWrapper
  {
   width:620px;
   border: 1px solid #000;
   padding:10px;
  }
 
 #resultsDiv
  {
   min-height:200px;
   padding:10px;
   border: 1px solid #000;
   width:600px;
  }
 #moreInformation
  {
   min-height:470px;
   border: 1px solid #000;
   width:600px;
   padding:10px;
  }
 #moreInformation .textual { background-color:#0F0; min-height: 380px;}  
</style>
</head>
<body>
<div id="resultsWrapper">
 <div id="resultsDiv">
  <div class="thumbnail">thumbnail</div>
  <div class="textual">
   <h3>This is the article Title</h3> 
   <p>Ut ac magna arcu. Vivamus vitae lacus dictum tortor viverra suscipit. Curabitur sit amet lacus odio, vel pellentesque turpis. Nulla tempor venenatis turpis, elementum rutrum nibh tempor nec. Mauris porttitor porta magna, quis iaculis erat convallis vel. Phasellus sit amet ultricies risus. Nulla nunc lectus, convallis non porttitor a, hendrerit id tortor. Curabitur vel nulla at lacus eleifend vulputate</p>
  </div>
  <div class="information">This is the information div</div>
 </div>
 <div id="moreInformation">
  <div class="thumbnail">thumbnail</div>
  <div class="profile">profile information</div>
  <div class="textual">
   <h3>More Information</h3>
   <p>Ut ac magna arcu. Vivamus vitae lacus dictum tortor viverra suscipit. Curabitur sit amet lacus odio, vel pellentesque turpis. Nulla tempor venenatis turpis, elementum rutrum nibh tempor nec. Mauris porttitor porta magna, quis iaculis erat convallis vel. Phasellus sit amet ultricies risus. Nulla nunc lectus, convallis non porttitor a, hendrerit id tortor. Curabitur vel nulla at lacus eleifend vulputate</p>
  </div>
  <div class="information">This is the information div</div>
 </div>
</div> 
</body>
</html>
6

“Complex” is really the LEAST of your issues – the absurdly undersized fixed metric fonts (10px? REALLY???), outdated markup, fixed height containers, endless div for christmas only knows what…

Even your first line of code:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”

Means you’re in transition from 1997 to 1998…

Many of the elements like ‘bittopadding’ are completely pointless, as you should be either able to pad the parent or use margins.

In general I think your method of building all these sections is a bit… flawed… When I wake up I’ll try to remember to revisit this.

7

OUCH!

Thanks for taking the time to help!

8

@chrisio,

OUCH!

The final output is for the customer and as long as he is happy then…

I had time on my hands so decided to create a version and the steps taken to achieve the result:

  1. made a template to include stylesheet and body files.
  2. copied and pasted the ‘body’ into the $body.php
  3. prefixed all CSS selectors with XXX to make them ineffective
  4. created a layour using style=‘…’
  5. created a stylesheet and copied styles to the stylesheet.css
  6. optimised the stylesheet to reduce properties to a single value
  7. included stylesheet and $body.php into the template

The $body.php is in two parts showing the result using style and secoondly using a stylesheet.

Here is the result:

http://johns-jokes.com/downloads/sp-a/is-this-css-too-complex-can-it-be-condensed/index.php

9

Well, I have to retract the ‘endless div for nothing’ part, as all those pesky borders really are the root of why they are in there. I can understand wanting the h3 first, but at that point you might as well do the entire ‘content’ para first since all that extra information is that – extra. An extra DIV can actually simplify the layout and make it a lot less prone to breakage…


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html
	xmlns="http://www.w3.org/1999/xhtml"
	lang="en"
	xml:lang="en"
><head>

<meta
	http-equiv="Content-Type"
	content="text/html; charset=utf-8"
/>

<meta
	http-equiv="Content-Language"
	content="en"
/>

<link
	type="text/css"
	rel="stylesheet"
	href="screen.css"
	media="screen,projection,tv"
/>

<title>
	Wrapping Demo
</title>

</head><body>

<div id="results">

	<div class="section">
		<div class="columnWrapper">
			<div class="content">
				<h3>This is the article Title</h3>	
				<p>
					Ut ac magna arcu. Vivamus vitae lacus dictum tortor viverra suscipit. Curabitur sit amet lacus odio, vel pellentesque turpis. Nulla tempor venenatis turpis, elementum rutrum nibh tempor nec. Mauris porttitor porta magna, quis iaculis erat convallis vel. Phasellus sit amet ultricies risus. Nulla nunc lectus, convallis non porttitor a, hendrerit id tortor. Curabitur vel nulla at lacus eleifend vulputate
				</p>
			<!-- .content --></div>
			<div class="sideBar">
				<img src="images/thumbnail.png" alt="thumbnail" />
			<!-- .sideBar --></div>
		<!-- .columnWrapper --></div>
		<div class="information">This is the information div</div>
	<!-- .section --></div>
	
	<div class="section">
		<div class="columnWrapper">
			<div class="content">
				<h3>More Information</h3>
				<p>
					Ut ac magna arcu. Vivamus vitae lacus dictum tortor viverra suscipit. Curabitur sit amet lacus odio, vel pellentesque turpis. Nulla tempor venenatis turpis, elementum rutrum nibh tempor nec. Mauris porttitor porta magna, quis iaculis erat convallis vel. Phasellus sit amet ultricies risus. Nulla nunc lectus, convallis non porttitor a, hendrerit id tortor. Curabitur vel nulla at lacus eleifend vulputate
				</p>
			<!-- .content --></div>
			<div class="sideBar">
				<img src="images/thumbnail.png" alt="thumbnail" />
				<div class="profile">profile information</div>
			<!-- .sideBar --></div>
		<!-- .columnWrapper --></div>
		<div class="information">This is the information div</div>
	<!-- .section --></div>
	
<!-- #results --></div>
		
</body></html>

Honestly, I HATE it for all those extra DIV – but with the border and background placements you want, that’s what they do.

Came up with this for CSS:


/* null margins and padding to give good cross-browser baseline */
html,body,address,blockquote,div,
form,fieldset,caption,
h1,h2,h3,h4,h5,h6,
hr,ul,li,ol,ul,
table,tr,td,th,p,img {
	margin:0;
	padding:0;
}

img,fieldset {
	border:none;
}

body {
	font:normal 85%/150% arial,helvetica,sans-serif;
}

#results,
#results .section,
#results .sideBar img,
#results .sideBar .profile,
#results .information {
	border:1px solid #000;
}

#results {
	width:45em;
	margin:10px;
	padding-top:10px;
	background:#EEF;
}

#results .section {
	overflow:hidden;
	zoom:1;
	padding:10px 10px 10px 162px;
	margin:0 10px 10px;
	background:#EFE;
}

#results .columnWrapper {
	position:relative;
	float:left;
	width:100%;
	background:#EEE;
}

#results .content {
	float:right;
	width:100%;
	padding-bottom:2em; /* footer height */
}

#results .content h3 {
	font:bold 120%/120% arial,helvetica,sans-serif;
	padding:0.4em;
	background:#FCC;
}

#results .content p {
	padding:0.5em;
}

#results .sideBar {
	position:relative; /* make IE6 depth sort these right */
	float:left;
	width:142px;
	margin:0 0 -2em -152px;
}

#results img {
	display:block;
	width:140px;
	height:170px;
	background:#FFF;
}

#results .profile {
	height:200px;
	margin-top:10px;
	background:#FFF;
}

#results .information {
	clear:both;
	zoom:1; /* trip haslayout, make IE6 behave */
	position:relative;
	padding:0.25em 0.5em;
	background:#DDD;
}

It assumes .information is a fixed height, since if it’s dynamic height you really can’t bottom position it like that (though you could just move it last in the code order and clear it – wouldn’t line up with the sidebar, OH WELL)… even with this adjustment they’ll never line up reliably with the border around .information (I’d just swing an axe at that).

Tossed up a copy online to show it in action.
http://www.cutcodedown.com/for_others/chrisio/template.html

as with all my examples the directory:
http://www.cutcodedown.com/for_others/chrisio/

is open for easy access… I also tossed your original in there. Tested working in most modern browsers, and even works in IE 6.

I used floats for most of the clearing behaviors so that it could be source first AND fluid. You can pull that width off #results and the entire thing will expand/shrink no problem (though I’d suggest a min-width of at least 320px). Threw some extra background colors on there too so you can see which DIV is which.

This uses a lot of negative margins to pull off the layout – but it makes the source order a bit more sensible, is a lot less prone to breakage if your heights change, works with dynamic metric fonts, etc, etc…

Oh, and word of advice, if you’re going to have an image file like a thumbnail, use an IMG tag from the START instead of a div, since IMG doesn’t usually behave like DIV… it also prevents you from leaving that DIV in place and stuffing the IMG tag inside it for no reason. Even better advice, get some REAL content (or a reasonable facsimile) in there with ALL of your elements (like the content of .information and .profile) in place before you even THINK about applying CSS to it for layout… The more you have written for semantic HTML, the more you’ll know what’s in there for REAL elements instead of slapping everything in DIV.

DIV are unavoidable when you have all sorts of borders and backgrounds like this, but that’s no reason to just put them around semantic elements when you don’t have to – see all the people who do <div id=“nav”><ul> serious Whiskey Tango Foxtrot nonsense in most every case.