My 5 favorite CSS tricks I learned this year

This year has been very productive for me as i developed numerous UI/UX apps and websites. On the way i've picked up some useful tricks to enhance my designs.

1. CSS Variables

CSS variables are useful when we want to apply the same style to common elements. Instead of adding a complex box-shadow, for example, to common elements we can initialize a variable and use that variable everytime we want to apply that style to an element

We initialize CSS variables with :root and the property we want to set, like so:

:root {
    --shadow: 0 1px 3px rgba(0,0,0,0.1);
}

And we can then use it in any element we want to apply this box-shadow to:

.container {
   box-shadow: var(--shadow);
}

2. Height Media Queries

Besides for screen width media queries, we can also apply screen height media queries, so devices with smaller screen height can be responsive. As well, when a device rotates its screen, the screen height changes and we need to reflect those changes for responsive purposes.

@media only screen and (max-height: 800px) {
    .container {
        height: 95%;
    }
}

For screens at 800 or less pixels will change the grid element's height.

3. Calc Function

The CSS calc function can be very useful when setting dynamic widths. Say we want an element's width to be based on another element's width.

.container {
    width: calc(100%-300px);
}

The width of our container element will be based on 100% of its parent container minus 300px, so if a container next to it is 300px, our dynamic container will respond accordingly.

4. Vertical Alignment

There are many ways to align an element vertically, But sometimes it can get complicated and not work, due to positioning complications of the parent element. One such method that works everytime is to position an element we want to align vertically, as absolute position and apply the following styles.

.container {
    position:absolute;
    top: -50%;
    transform: translateY(50%);
    margin: auto;
}

This will vertically align the element to its parent container.

5. Border-Box Property

.container {
    box-sizing: border-box;
}

Border box is one of the most useful properties in CSS. It allows us to create padding on elements while keeping the dimensions of the element uniform. So if we have a container with 300px width and 300px height and a padding of 30px, by default CSS will add those 30px to the container's dimensions thus causing many problems of alignment and other issues in our design. By applying a box-sizing: border box property, we can make all containers uniform in size.
box-sizing can also be used to make inputs, textareas and select boxes, the same size as well, to create a uniform look to our elements.

Website: www.flexrweb.com