These are some tips to improve your CSS skills.
CSS Properties
:root {
--clr-text: 0 0% 100%;
/** OTHER PROPERTIES... */
}
body {
/** We say that the text color for body and its children
(inherited) is equals to hsl. The value of hsl contains
the value of the CSS property, "--clr-text", divided by
the alpha (for opacity) equals to the CSS property,"--_text-opacity"
and a fallback of 1 if it doesn't exist.*/
color: hsl(var(--clr-text) / var(--_text-opacity, 1));
}
CSS properties are useful for reusability, and less code for transition effects for indicators like
:hover
and
:active
and saves us alot of lines of repetitive code.
.btn {
background-color: hsl(var(--default-btn-bg) / var(--_background-opacity, 1));
color: hsl(var(--default-btn-text) / var(--_text-opacity, 1));
}
.btn:hover {
--_bg-opacity: 0.87;
}
Margins & Paddings
Did you know that
margin
and
padding
is a shorthand for their left, top, right, and bottom singular declarations? Here's how you can use them.
.btn {
/** Give this element a padding of 0.5rem
on its vertical axis (top and bottom)
and 1rem on its horizontal axis (left and right) */
padding: 0.5rem 1rem;
}
/** If you only want to change the horizontal axis' padding and margin */
.btn {
padding-inline: 1rem;
/** Centers the element if it has extra spaces on both sides. */
margin-inline: auto;
}
/** For the vertical axis */
.btn {
padding-block: 0.5rem;
margin-block: 0;
}
This is useful in declaring more specific padding/margins.
@supports
You can use a
@supports
query and also its opposite
@supports not
to have a fallback for browsers that do not support the features that you use.
.landscape {
aspect-ratio: 16/9
}
@supports not (aspect-ratio: 16/9) {
.landscape {
width: 100%;
height: auto;
}
}
CSS validations
<style>
.input-group:has(:invalid) {
color: red;
input {
border-color: red;
}
}
</style>
<div class="input-group">
<label for="email">Email</label>
<input type="email" required />
</div>
The CSS declarations will take into effect as long as the HTML5 validations deem the input inside of the element with a class of
input-group
as invalid.
Use typescale
This is more of a design thing than CSS, but if you haven't tried using a typescale yet, then you should use it to make your websites look more appealing.
Conclusion
There are alot more tips available out there, but that will be all for now. Thank you for reading, and I hope you learned something! God bless.
Top comments (0)