BAD CSS

These Things Annoy Me

(And probably annoy you too)

In this post I’m just listing out some CSS gripes I’ve seen and their annoyance based on my scale here:

Slightly Annoyed

Annoyed

Really Pissed

---

<%= image_tag "articles/badcss/level.png" %>

Example 1

Please Don’t Do This:

		<div style="color:red;">
			You have not entered a name.
		</div>
		
		<div style="color:gray;font-size:12px">
			Name: <input type="text" size="20" name="name"/>
		</div>
		
		<div style="color:gray;font-size:12px">
			Address: <input type="text" size="20" name="addr"/>
		</div>
	

because that makes me have to do this:

		<div class="error">
			You have not entered a name.
		</div>
		
		<div class="labelInput">
			Name: <input type="text" size="20" name="name"/>
		</div>
		
		<div class="labelInput">
			Address: <input type="text" size="20" name="addr"/>
		</div>
	

and

	.error {
		color:red;
	}
	
	.labelInput {
		color:gray;
		font-size:12px
	}
	

---

Example 2

Please Don’t Describe What the CSS is Doing

		.highlight-red {
			color:red;
			font-weight:bold
		}
		
		.left-align-input {
			margin-left:30px;
			font-color:gray;
			font-size:20px;
		}
	

---

Example 3

Please Don’t Add Default Styles to Elements

		.error {
			color:red;
			font-weight:bold
		}
		
		table {
			margin-left:30px;
			font-color:yellow;
			font-size:6px;
		}
		
		p {
			margin-right:20px;
			font-color:red;
			font-size:6px;
		}
		
		articleContent {
			text-align:center;
		}
		.
		.
		.
	

because that makes me do:

		.error {
			color:red;
			font-weight:bold
		}
		/*
		table {
			margin-left:30px;
			font-color:yellow;
			font-size:6px;
		}
		
		p {
			margin-right:20px;
			font-color:red;
			font-size:6px;
		}
		*/
		articleContent {
			text-align:center;
		}
		.
		.
		.
	

or add my own css to P and Table elements I do not want your crappy style applied to.

---

Example 4

Stay back! I don’t want to catch your divities.

		<div id="out-wrapper-div">
			<div id="inner-wrapper-div">
				<div class="inner-wrapper-input">
					<span class="input-span-wrapper"><input type="text" name="name"/></span>
				</div>
			</div>
		</div>
		<div id="out-wrapper-div">
			<div id="inner-wrapper-div">
				<div class="inner-wrapper-input">
					<span class="input-span-wrapper"><input type="text" name="addr"/></span>
				</div>
			</div>
		</div>
	

---

Example 5

Important! Don’t abuse !important

There has been much discussion on when is the right time to use !important, so and there are valid reasons to use it. Do not abuse such power.

		p {
			margin-right:20px !important;
			font-color:red !important;
			font-size:6px !important;
			padding-left:0px !important;
			margin:0px !important;
		}
	

ugh.

---

Example 6

You can actually add arbitrary text to HTML using CSS. No matter how experienced you are, there will be times where you forget this and spend needless time digging around trying to figure out how this magical text appears only to find out it was produced by CSS.

Doing this like:

		#copyright:after { content: "Copyright 2011 John Smith"; }
		.
		.
		#homeLink:after { content: "Home";}
	

makes it really hard to find out which JSP / GSP / RHTML / ETC ‘view’ is rendering it which means I now have to go digging around your javascript and CSS files for content that has been added by CSS.

---

Example 7

Group related styles

		table {
			text-align:center;
			font-color:gray;
		}
		
		.error {
			font-color:red;
		}
		
		.article-content-header{
			font-size:12px;
		}
		tr {
			margin-left:10px;
		}
		#navbar {
		.
		.
		.
		th {
			font-weight:bold;
		}
		.hello {
			padding:2px;
			margin:10px;
		}
		
		td {
		}