1. A graphic designer thought it would be more harmonious to have them the same color.
2. A business guy thought it would increase pageviews.

The worst part is, they’re both right. But they’re assholes because they’re selling out user experience to avoid picking a color or to inflate a not-very-useful statistic. Users are deliberately confused and led to click in circles for their trivial convenience or wrongheaded book-cooking.

This boiled over for me when I was trying to read CopyBlogger. They have some really nice writing, but I found myself opening the articles over and over because I couldn’t see that I’d visited it. I just gave up on reading the site, who needs assholes?

A few days later I remembered that Firefox has a setting in the preferences to override page and link colors. Unfortunately, it doesn’t let me override link colors and leave page colors alone.

The way to do undo the damage these assholes have done to their own site is to add a user stylesheet to Firefox. It’s a styling file that Firefox loads for every single page you visit. In Linux it’s ~/.mozilla/firefox/random junk/chrome/userContent.css. On other systems, search for the file userContent.css, though you may just need to search for the chrome directory and create the file. Here’s what to put in there:

 
p > a { color: blue !important; text-decoration: underline !important; }
p > a:visited { color: purple !important; text-decoration: underline !important; }

This forces all unvisited links in the text of a page to be blue and underlined, and all visited links to be purple and underlined. This isn’t perfect, sometimes the text of a page will be on a blue background, but it works well for nearly all pages I visit. The best part about is is the p > keeps it from changing link colors in headers and other parts of the page that are almost never on white backgrounds.

I like to break down stylesheets so there’s a site-wide stylesheet with global stylings like fonts, the site’s template, and common elements. This is the file that metastasizes on you.

My solution is to break down stylesheets by controller and action, and Rails makes this quite easy:

 
# app/views/layout/application.rb
<%= stylesheet_link_tag *(['global'] + @stylesheets) %>

 
# app/controllers/application.rb
class ApplicationController < ActionController::Base
  before_filter :add_stylesheets
 
  def initialize
    @stylesheets = []
  end
 
  def add_stylesheets
    ["#{controller_name}/_controller", "#{controller_name}/#{action_name}"].each do |stylesheet|
      @stylesheets << stylesheet if File.exists? "#{Dir.pwd}/stylesheets/#{stylesheet}.css"
    end
  end
end

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:

 
<% @styleshets << "controller/_partial_name" %>

Nice and tidy.