key
A key, for e.g. AC, =, ., +, -, ×, ÷, and the digits 0 to 9.
HTML
Default
<button class="key" type="button">8</button>
A key can be clicked and would need a click handler so the <button> element seems appropriate.
By default, a <button> element has its type attribute set to submit. Since the <button> element backing a key won't be for submitting form data to a server it's recommend to set its type attribute to button.
Primary
<button class="key key--primary" type="button">AC</button>
Secondary
<button class="key key--secondary" type="button">=</button>
Since keys only have a style modifier I chose to keep the naming simple. No modifier signals the default and the key--primary and key--secondary block modifiers signal the primary and secondary styles respectively. An alternative naming system for the style modifier could have been:
- The two dashes style with modifier name and value
key--style--default,key--style--primary,key--style--secondary
Sass
@use "../colors";
/*button*/.key {
border: 0;
padding: 0;
display: block;
width: 100%;
height: 100%;
font-size: 1.25rem;
background-color: colors.$matterhorn;
color: colors.$white;
cursor: pointer;
}
.key:hover {
outline: 1px solid colors.$grey;
color: colors.$black;
}
.key--primary {
background-color: colors.$mediumCarmine;
}
.key--secondary {
background-color: colors.$prussianBlue;
}
Colors
I prefer to refer to my colors by name. I like the approach outlined by Sacha Grief in SASS & Color Variables but I didn't follow the two-tier system here since I didn't need it. I only used descriptive names. However, if I decide I want to make the application themeable then adding functional names would be quite useful.
What's with the /*button*/ Comment?
I picked it up from Harry Roberts. In CSS Guidelines, he shares the idea of using quasi-qualified selectors to provide information about where a class might be expected or intended to be used. By using quasi-qualified selectors we can still provide that information without actually qualifying the selector and increasing its specificity.
Key Shape
The key should take up the full width and height of its parent. This allows the parent to control the shape of the key. We need this flexibility because of how the AC and = keys are intended to be displayed.