<?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>Push cx &#187; maintainability</title>
	<atom:link href="http://push.cx/tag/maintainability/feed" rel="self" type="application/rss+xml" />
	<link>http://push.cx</link>
	<description>A traveling geek&#039;s blog on development, games, and the web</description>
	<lastBuildDate>Fri, 14 Oct 2011 10:24:13 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.1</generator>
		<item>
		<title>Tidy Stylesheets in Rails</title>
		<link>http://push.cx/2006/tidy-stylesheets-in-rails</link>
		<comments>http://push.cx/2006/tidy-stylesheets-in-rails#comments</comments>
		<pubDate>Sat, 28 Oct 2006 03:06:06 +0000</pubDate>
		<dc:creator>Peter Harkins</dc:creator>
				<category><![CDATA[Code]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[design]]></category>
		<category><![CDATA[maintainability]]></category>
		<category><![CDATA[Rails]]></category>
		<category><![CDATA[Ruby]]></category>

		<guid isPermaLink="false">http://push.cx/2006/tidy-stylesheets-in-rails</guid>
		<description><![CDATA[It&#8217;s very easy for a site&#8217;s CSS to grow a single giant, brittle stylesheet. It becomes impossible to change anything because of bizarre interactions between elements, unexpected interactions, and simply because it&#8217;s just too big for anyone to understand. Much of programming is managing complexity, and I&#8217;ll share a nice technique in that vein. I [...]]]></description>
			<content:encoded><![CDATA[<p>
It&#8217;s very easy for a site&#8217;s CSS to grow a single giant, brittle stylesheet. It becomes impossible to change anything because of bizarre interactions between elements, unexpected interactions, and simply because it&#8217;s just too big for anyone to understand. Much of programming is managing complexity, and I&#8217;ll share a nice technique in that vein.
</p>

<p>
I like to break down stylesheets so there&#8217;s a site-wide stylesheet with global stylings like fonts, the site&#8217;s template, and common elements. This is the file that metastasizes on you.
</p>

<p>
My solution is to break down stylesheets by controller and action, and Rails makes this quite easy:
</p>

<pre>&nbsp;
<span style="color: #808080; font-style: italic;"># app/views/layout/application.rb</span>
&lt;%= stylesheet_link_tag *<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#91;</span><span style="color: #ff0000;">'global'</span><span style="color: #66cc66;">&#93;</span> + <span style="color: #0000ff;">@stylesheets</span><span style="color: #66cc66;">&#41;</span> %&gt;</pre>

<pre>&nbsp;
<span style="color: #808080; font-style: italic;"># app/controllers/application.rb</span>
class ApplicationController &lt; ActionController::<span style="color: #006600;">Base</span>
  before_filter :add_stylesheets
&nbsp;
  def initialize
    <span style="color: #0000ff;">@stylesheets</span> = <span style="color: #66cc66;">&#91;</span><span style="color: #66cc66;">&#93;</span>
  <span style="color: #b1b100;">end</span>
&nbsp;
  def add_stylesheets
    <span style="color: #66cc66;">&#91;</span><span style="color: #ff0000;">"#{controller_name}/_controller"</span>, <span style="color: #ff0000;">"#{controller_name}/#{action_name}"</span><span style="color: #66cc66;">&#93;</span>.<span style="">each</span> <span style="color: #b1b100;">do</span> |stylesheet|
      <span style="color: #0000ff;">@stylesheets</span> &lt;&lt; stylesheet <span style="color: #b1b100;">if</span> File.<span style="">exists</span>? <span style="color: #ff0000;">"#{Dir.pwd}/stylesheets/#{stylesheet}.css"</span>
    <span style="color: #b1b100;">end</span>
  <span style="color: #b1b100;">end</span>
end</pre>

<p>
This code automatically loads stylesheets for the controller and the action if they exist. The subdivision allows you to make them as compact and specific as possible. If a partial needs its own code, write at the top:
</p>

<pre>&nbsp;
&lt;% <span style="color: #0000ff;">@styleshets</span> &lt;&lt; <span style="color: #ff0000;">"controller/_partial_name"</span> %&gt;</pre>

<p>
Nice and tidy.
</p> <img src="http://push.cx/wp-content/plugins/wordpress-feed-statistics/feed-statistics.php?view=1&post_id=186" width="1" height="1" style="display: none;" />]]></content:encoded>
			<wfw:commentRss>http://push.cx/2006/tidy-stylesheets-in-rails/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

