<?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>Paul Randall &#187; oocss</title>
	<atom:link href="https://paulrandall.com/category/oocss/feed/" rel="self" type="application/rss+xml" />
	<link>https://paulrandall.com</link>
	<description>Experimenting for a living.</description>
	<lastBuildDate>Sat, 15 Mar 2025 15:32:49 +0000</lastBuildDate>
	<language>en-US</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>https://wordpress.org/?v=4.1.41</generator>
	<item>
		<title>OOCSS</title>
		<link>https://paulrandall.com/2012/08/18/oocss/</link>
		<comments>https://paulrandall.com/2012/08/18/oocss/#comments</comments>
		<pubDate>Sat, 18 Aug 2012 14:17:38 +0000</pubDate>
		<dc:creator><![CDATA[Paul]]></dc:creator>
				<category><![CDATA[oocss]]></category>
		<category><![CDATA[coding]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[front-end]]></category>

		<guid isPermaLink="false">http://prandall.com/?p=614</guid>
		<description><![CDATA[I&#8217;ve been working with OOCSS on a few projects and I&#8217;ve been really impressed with the concept so far. For those who don&#8217;t know of the concept, OOCSS stands for Object Oriented CSS — @stubornella can explain it better than me on the GitHub repo: https://github.com/stubbornella/oocss/wiki I had previously considered this sort of approach to [&#8230;]]]></description>
				<content:encoded><![CDATA[<p>I&#8217;ve been working with OOCSS on a few projects and I&#8217;ve been really impressed with the concept so far.</p>
<p>For those who don&#8217;t know of the concept, OOCSS stands for Object Oriented CSS — <a href="http://twitter.com/stubornella">@stubornella</a> can explain it better than me on the GitHub repo: <a href="https://github.com/stubbornella/oocss/wiki">https://github.com/stubbornella/oocss/wiki</a><span id="more-614"></span></p>
<p>I had previously considered this sort of approach to only be suitable for prototyping frameworks, such as Zurb Foundation. I was originally hesitant of the presentation naming of the classes (I was never a fan of presentational grids to begin with) but I have understood that this approach is much easier to understand when multiple people are working on a project, without any documentation.</p>
<p>The idea of potentially using multiple classes for each element struck me as bloating the file, but it makes sense.</p>
<p>So, my concerns:</p>
<p>Grids. Name them how you like: &#8220;.size2of3, .col1&#8243; but they work. If it were using those, or using &#8220;#primary&#8221; I know which I&#8217;d go with now.</p>
<p>The idea in the past has been that we could restyle #primary and change the width, padding, everything. But when has that happened? Restyling a website with JUST CSS?</p>
<p>I like presentation grids now.</p>
<p>The next thing, whether to go presentational on anything else? Colours, sizes? In some previous projects I used classes like &#8220;.orange&#8221;. This I feel is wrong. I now define primary, secondary and tertiary colours. Not only does this keep a sense of order through the whole project, but if you change the brand, the colours can change with no HTML amends (sounds a bit contradictory I know).</p>
<p>The next thing. Responsive. I&#8217;ve been a massive advocate of responsive, but the issue I have with presentational grids is that they no longer make sense when you want to change the view.</p>
<p>Some systems decide to revert to a 1 column approach. Whilst this might be OK for mobile, the tablet could be different. Zurb actually have phone class names that you can use. e.g. (&#8220;.size2of5 .phone1of1 .tablet1of2&#8243;) but that seems to require a lot of extra thinking, and extra bloat that is unnecessary.</p>
<p>I&#8217;m still thinking about this one. It also doesn&#8217;t cater for the &#8216;mobile first&#8217; approach.</p>
<p>So, there are lots of things to think about, but I do feel like it is the way to go.</p>
<p>Want to know more. Well, follow @csswizardry and @stubornella and check out the following pages:</p>
<ul>
<li><a href="https://github.com/stubbornella/oocss/wiki">https://github.com/stubbornella/oocss/wiki</a></li>
<li><a href="http://vimeo.com/44773888">http://vimeo.com/44773888</a></li>
<li><a href="http://oocss.org/">http://oocss.org/</a></li>
</ul>
]]></content:encoded>
			<wfw:commentRss>https://paulrandall.com/2012/08/18/oocss/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
