<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>John On Web Stuff &#187; validation</title>
	<atom:link href="http://blog.geekyjohn.com/tag/validation/feed/" rel="self" type="application/rss+xml" />
	<link>http://blog.geekyjohn.com</link>
	<description>My take on web things. Sometimes witty. Sharing of stuff.</description>
	<lastBuildDate>Tue, 06 Apr 2010 11:26:48 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0</generator>
		<item>
		<title>CSS Formatting Woes</title>
		<link>http://blog.geekyjohn.com/2009/11/css-formatting-woes/</link>
		<comments>http://blog.geekyjohn.com/2009/11/css-formatting-woes/#comments</comments>
		<pubDate>Wed, 04 Nov 2009 03:01:14 +0000</pubDate>
		<dc:creator>John</dc:creator>
				<category><![CDATA[CSS]]></category>
		<category><![CDATA[Programming]]></category>
		<category><![CDATA[formatting]]></category>
		<category><![CDATA[validation]]></category>

		<guid isPermaLink="false">http://blog.geekyjohn.com/?p=210</guid>
		<description><![CDATA[As much as I like to save some bandwidth here and there, going in to edit a stylesheet where each rule is on its own line can be a nightmare. I went in search of some CSS formatting tools to make life a little easier. (Because who wants to reformat 4000 lines of CSS by [...]]]></description>
			<content:encoded><![CDATA[<p>As much as I like to save some bandwidth here and there, going in to edit a stylesheet where each rule is on its own line can be a nightmare. I went in search of some CSS formatting tools to make life a little easier. (Because who wants to reformat 4000 lines of CSS by hand, right?).</p>

<h2>Validness</h2>

<p>It’s always a good idea to try and keep your CSS as valid as possible. On occasion you might need to put some hacks in there for IE6 or IE7 – if there are many, it’s probably a good idea to separate those out to stylesheets that are then loaded in with conditional comments.</p>

<p>To validate your CSS, head over to <a title="http://jigsaw.w3.org/css-validator/" href="http://jigsaw.w3.org/css-validator/" target="_blank">http://jigsaw.w3.org/css-validator/</a> – there you can point to a stylesheet URL, upload a file, or directly input CSS and have it validated.</p>

<h2>Formatting</h2>

<p>To format CSS you can use the “Clean CSS” service at <a title="http://www.cleancss.com/" href="http://www.cleancss.com/" target="_blank">http://www.cleancss.com/</a>.</p>

<p>Input the CSS you want to format and choose from several options, hit submit, and voilà, out comes formatted CSS – it also lets you know the code changes that it made.</p>

<h3>The options</h3>

<p>From the dropdown select the type of formatting you want. For a production output you should probably choose “High (moderate readability, smaller size)”, if you want to make CSS more readable, use the “Low (higher readability)” option.</p>

<p>Unless you know what you’re doing – you should probably leave “Sort selectors” and “sort properties” unchecked, as these have the potential to break the cascade of styles in your stylesheet.</p>

<p>I personally prefer to keep the “Compress font-weight” option unchecked &#8211; (e.g. this changes <code>font-weight:bold;</code> to <code>font-weight:700;</code> doesn’t quite read the same).</p>
<p><a href="http://www.addtoany.com/add_to/digg?linkurl=http%3A%2F%2Fblog.geekyjohn.com%2F2009%2F11%2Fcss-formatting-woes%2F&amp;linkname=CSS%20Formatting%20Woes" title="Digg" rel="nofollow" target="_blank"><img src="http://blog.geekyjohn.com/wp-content/plugins/add-to-any/icons/digg.png" width="16" height="16" alt="Digg"/></a> <a href="http://www.addtoany.com/add_to/twitter?linkurl=http%3A%2F%2Fblog.geekyjohn.com%2F2009%2F11%2Fcss-formatting-woes%2F&amp;linkname=CSS%20Formatting%20Woes" title="Twitter" rel="nofollow" target="_blank"><img src="http://blog.geekyjohn.com/wp-content/plugins/add-to-any/icons/twitter.png" width="16" height="16" alt="Twitter"/></a> <a href="http://www.addtoany.com/add_to/slashdot?linkurl=http%3A%2F%2Fblog.geekyjohn.com%2F2009%2F11%2Fcss-formatting-woes%2F&amp;linkname=CSS%20Formatting%20Woes" title="Slashdot" rel="nofollow" target="_blank"><img src="http://blog.geekyjohn.com/wp-content/plugins/add-to-any/icons/slashdot.png" width="16" height="16" alt="Slashdot"/></a> <a href="http://www.addtoany.com/add_to/facebook?linkurl=http%3A%2F%2Fblog.geekyjohn.com%2F2009%2F11%2Fcss-formatting-woes%2F&amp;linkname=CSS%20Formatting%20Woes" title="Facebook" rel="nofollow" target="_blank"><img src="http://blog.geekyjohn.com/wp-content/plugins/add-to-any/icons/facebook.png" width="16" height="16" alt="Facebook"/></a> <a class="a2a_dd addtoany_share_save" href="http://www.addtoany.com/share_save?linkurl=http%3A%2F%2Fblog.geekyjohn.com%2F2009%2F11%2Fcss-formatting-woes%2F&amp;linkname=CSS%20Formatting%20Woes"><img src="http://blog.geekyjohn.com/wp-content/plugins/add-to-any/share_save_120_16.png" width="120" height="16" alt="Share/Bookmark"/></a> </p>]]></content:encoded>
			<wfw:commentRss>http://blog.geekyjohn.com/2009/11/css-formatting-woes/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
