Improve your CSS skills

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.

Blog