This content originally appeared on DEV Community and was authored by Stas Melnikov
The type attribute
There is a practice to use extra classes when we create a custom checkbox and radio button. People just add classes such as checkbox or radio. Why isn't well? In this way, we increase the probability of using CSS duplication. For example, you have to duplicate the background-* property, i.e. background-position.
That's not nice. I suggest fixing it. We can create a single class where we define common CSS for checkboxes and radio buttons. For example, we define the background-position, background-size, etc.
The next step is to define different properties. For example, to set the icons' sources using a few the background-image. At this point the main magic of my way is.
We have to add different values to the type attribute of the input. When we need a checkbox we use the checkbox, when a radio button - the radio. So we can use the attribute selector to avoid extra classes. We can write checkboxes only styles using the [type="checkbox"] selector and the [type="radio"] selector for radio buttons. In this way, we avoid duplication CSS.
don't do this
<label class="checkbox">
<input class="checkbox__input" type="checkbox">
<span class="checkbox__text">show all</span>
</label>
<label class="radio">
<input class="radio__input" type="radio">
<span class="radio__text">show all</span>
</label>
.checkbox__text::before {
background-position: 50% 50%;
background-size: contain;
background-image: url("checkbox_unchecked.svg");
}
.checkbox__input:checked + .checkbox__text::before {
background-image: url("checkbox_checked.svg");
}
.radio__text::before {
background-position: 50% 50%;
background-size: contain;
background-image: url("radio_unchecked.svg");
}
.radio__input:checked + .radio__text::before {
background-image: url("radio_checked.svg");
}
you can use this instead
<label class="toggle">
<input class="toggle__input" type="checkbox">
<span class="toggle__text">show all</span>
</label>
<label class="toggle">
<input class="toggle__input" type="radio">
<span class="toggle__text">show all</span>
</label>
.toggle__text::before {
background-position: 50% 50%;
background-size: contain;
}
.toggle__input[type="checkbox"] + .toggle__text::before {
background-image: url("checkbox_unchecked.svg");
}
.toggle__input[type="checkbox"]:checked + .toggle__text::before {
background-image: url("checkbox_checked.svg");
}
.toggle__input[type="radio"] + .toggle__text::before {
background-image: url("radio_unchecked.svg");
}
.toggle__input[type="radio"]:checked + .toggle__text::before {
background-image: url("radio_checked.svg");
}
The hidden attribute
A lot of UI elements have a few states, i.e. showing and hiding. The popular method to create a hiding state is to use a separate class in which you define the display: none. So you get the 2 at-rule.
I like to do things differently. I try to save my CSS short to avoid overriding properties. In this task I like to use the approach that is based on the hidden attribute and the :not() pseudo-class.
The hidden attribute hides elements. It just adds the display: none to elements. So I can say, I want to add CSS to the element when it isn't hidden. And at this moment the :not() pseudo-class comes to help.
I just write :not([hidden]) and I get what I want. And I don't need to add classes or remember about the selector's specificity. I get short CSS.
The single minus is you need to remember the hidden attribute hide an element from users, keyboard, screen readers. It will not be accessible fully. So if you want to use my approach remember about this nuance.
don't do this
<div class="modal">...</div>
<div class="modal modal--active">...</div>
.modal {
display: none;
position: fixed;
top: 0;
left: 0;
}
.modal--active {
display: flex;
}
you can use this instead
<div class="modal">...</div>
<div class="modal" hidden>...</div>
.modal:not([hidden]) {
display: flex;
position: fixed;
top: 0;
left: 0;
}
P.S. If you like these tips go to read others on my Linkedin.
P.S.S. This post was written with the support of my patrons: Ashlea Gable, Ben Rinehart, Sergio Kagiema, Vlad Bazhanov, Spiridon Konofaos, Jesse Willard, Tanya Ten.
This content originally appeared on DEV Community and was authored by Stas Melnikov
Stas Melnikov | Sciencx (2021-06-21T15:29:17+00:00) HTML attributes that will reduce your CSS. Retrieved from https://www.scien.cx/2021/06/21/html-attributes-that-will-reduce-your-css/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.