Focusing on semantics instead of the technical has application beyond CSS.

Amazingly, a few hours after posting my last bit on Semantic HTML, a coworker noted the following in a code review:

Small lie:

.indent16px{ margin-left: 15px; }

I don't like indent__px for classes like this – it seems too specific and easy to fall out of sync like this one did. It also seems redundant to name the class after the style its wrapping.

I really don't like 'SmallIndent' for classes like this – it's not immediately obvious what small means or how it compares to tiny, normal, large, etc.

Any ideas on what we should name classes similar to this?

Great insight!  Moving to semantic HTML, alternatives for cases like .indent16px would follow by answering, "Why should this be indented?" Here are some examples, but depending on the context you can probably come up with something better:

• accreditation-report-subsection
• content-under-header
• subcontent

Semantic vs. Technical in Testing

This is very similar to conversations I've been having with our testing team lately as we've been exploring how to write automated UI tests. A key principle we've been trying out is to distinguish between what needs to get done and how to get it done. For example:

• What: Delete the "bankers" security role.
• How: Click the "roles" button, find the row in the table with the "bankers" text, click the "delete" icon, click "Ok" on the confirmation dialog, wait for the page to refresh, verify the row is gone.

In this scenario I've been calling the "What" the semantic or business meaning, and the "How" I've been calling the technical meaning.

This distinction is important for testing because if you don't separate your semantic code from your technical code (sounds like SRP) then you end up with logic duplication from one test to another (and we want to be DRY). This has a very practical effect on how easy it is to fix tests when the developers change the UI.

Back to CSS

When you name a CSS class, ask yourself, "Does this name describe the meaning of the content (the what – the semantics) or does it describe how I'm going to style it (the technical)?"