This is a real discussion (with most of the swearing removed) within the Erskine front-end team about CSS naming conventions for a button.

Hopefully it illustrates our attention to detail and how much we care about getting things right… or at least our stubborn and argumentative side.

Mat: “What should I call this button?”

Robin: “What?”

M: “Well it’s a button, so has the class .button, but it’s also the primary call to action, that’s why it’s red.”

R: “Oh, .button—red?”

M: “Hmmm, I was thinking .button—primary”

R: “Yeah, but then how does another developer know which one is ‘primary’?” (Robin is obsessed with the ease of maintenance).

M: “But what if we change the button colour later on?”

R: “Find and replace!”

Tom: “Noooo!”

M: “???”

T: “I know what Robin thinks and he is wrong, use .button–primary; if we start doing .button–red, I quit!”

M: “I don’t like it either, but .button–primary has issues too. I suppose for colours it works, but what about size?”

T: “.button–primary .button–alpha; .button–red is basically the same as .font-size-12px”

M: “That’s cool, but what happens when I’ve made .button–alpha a certain size and then someone introduces a larger button?”

R: “Yeah, ‘I want this button to be dark red’ - Phil”

R: “.button__primary–in-between-primary-and-secondary”

T: “What are the variants/axes that we typically have? Colour? Size? What else?”

M: “errrrr… Gender?”

T: “Any how”

M: “Primary, secondary, tertiary for colour? Alpha, beta gamma for size?”

T: “I guess the problem with the colour thing is that there is a hierarchy in the naming that may or may not actually be present in the design.”

M: “Yeah so we need a non-linear naming convention… We could name them after famous dogs!”

T: “The problem is we also need to make them understandable.”

M: “.button–lassie? .button—laika?”

T: “The problem is we also need to make them understandable.”

R: “.button–red makes sense, just admit it.”

T: “.button–red is evil and leads to the road to hell.”

T: “How about this for an example: at different breakpoints an area consistently has different background colours, sometimes red, sometimes white, so a .button–red in that area can’t actually be red all the time…”

R: “That’s a good point.”

T: “So all of a sudden you have CSS like:”

.button--red {
   background-color: white;

T: “And I go insane and kill everyone”

M: “So what’s the conclusion? Other than Robin is dumbs.”

R: “.button–color-red-to-white. Done. Ship it. Open-source that mother.”

T: “£$%^&!”

M: “So… Colours: primary, secondary, tertiary… Sizes: alpha, beta, gamma, delta…”

M: “Just say yes!”

T: “With sizes is our mistake to start at one end of the range? By defining alpha too early etc.”

M: “Yeah but if we assume that’s going to happen, we can prepare for it. Sorted.”

R: “I still don’t agree…”

M: “(eyeroll)”

M: “So, Tom, any thoughts on a name for your pending new arrival…?”