CodeSOD: Classical Design

There is a surprising amount of debate about how to use CSS classes. The correct side of this debate argues that we should use classes to describe what the content is, what role it serves in our UI; i.e., a section of a page displaying employee information might be classed employee. If we want the "name" field of an employee to have a red underline, we might write a rule like:

.employee .name { text-decoration: underline red; }

The wrong side argues that this doesn't tell you what it looks like, so we should have classes like red-underline, because they care what the UI element looks like, not what it is.

Mark sends us some HTML that highlights how wrong things can go:

<div class="print ProfileBox floatRight" style="background-color:#ffffff;" >
	<div class="horiz">
		<div class="horiz">
			<div class="vert">
				<div class="vert">
					<div class="roundGray">
						<div class="roundPurple">
							<div class="roundGray">
								<div class="roundPurple">
									<div class="roundGray">
										<div class="roundPurple">
											<div class="roundGray">
												<div class="roundPurple">
													<div class="bold">
														Renew Profile
														<br><br>
														Change of Employer
														<br><br>
														Change of Position
														<br><br>
														Print Training Reports
														<br><br><br><br>
													</div>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<div class="floatRight">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</div>
<div class="ProfileBox print floatRight" style="background-color:#ffffff" >
	<div class="horiz">
		<div class="horiz">
			<div class="vert">
				<div class="vert">
					<div class="roundGray">
						<div class="roundPurple">
							<div class="roundGray">
								<div class="roundPurple">
									<div class="roundGray">
										<div class="roundPurple">
											<div class="roundGray">
												<div class="roundPurple">
									<div class="bold">
										Profile Status:
										<br><br>
										Registry Code:
										<br><br>
										Career Level:
										<br><br>
										Member Since:
										<br><br>
										Renewal Date:
										<br><br>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		</div>
				</div>
			</div>
		</div>
	</div>
</div>

It's worth noting, this was not machine-generated HTML. The developer responsible wrote this code. Mark didn't supply the CSS, so I have no idea what it would display like, but the code looks horrible.

Mark adds:

A colleague of mine committed this code. This is the perfect example of why you define your CSS classes based on the content, not the styling they apply.

[Advertisement] Continuously monitor your servers for configuration changes, and report when there's configuration drift. Get started with Otter today!

This post originally appeared on The Daily WTF.