💪 CSS Pro tips

Let’s try to avoid some styling mistakes

In the world of web development, CSS is the backbone of the web page and now every front-end can avoid some basic mistakes in their CSS code, let's learn how we can avoid CSS mistakes and also write CSS like Pro 😎

Theme creation for feature development

let’s take some Framework examples like bootstrap, material UI, Chakra UI e.t.c. when you look at the base of any framework, you found a basic theme stretcher. But most of the front-end developers are not using theme stretcher in their projects so let’s see how you can create a theme in CSS.

Root: CSS provide :root pseudo-class helps you to create a theme see the example below:

:root {
    --color-black: black;
    --color-white: white;
    --color-primary: blue;
    --color-secondary: darkblue;
    --font-roboto: 'Roboto';
    --font-monospace: 'monospace';
    --heading-one: 48px;
    --heading-two: 40px;
    --heading-three: 32px;
    ...
}

Like JavaScript, PHP, and some other languages you can create variables in CSS and use it as value in var(--color-black) it will help you and also another developer who will work on it because in the feature if you need to change the primary color all over the website you just change it in the root variable it will automatically change everywhere.

Component: you must create components in your website because just imagine you have social icons, primary, secondary buttons, and form inputs. And you use it in many places if you do not create a component of each button you need to write CSS every time and it will be a time-consuming and bad practice of code. So you can create a class for each and every element which you need to use many times.

Utilities: As a front-end developer when I create a webpage and I didn’t use any CSS framework I need some utility classes like d-flex display flex and the same for other properties. In the same as you should create utility classes in your projects for which properties you need to use many times.

Note: if you are using any framework, you will already have utility classes and you also can update its default colors, font-family and other properties with help of :root pseudo-class

Selector

Every front-end developer when writing CSS, they will be use selectors in their code, so there is a question “how I can make selector in a better way or like a pro”?

Let’s see how:

// General way to create selector
header a, footer a{
   color: var(--primary);
   font-size: 16px;
}
// Pro way to create
:is(header, footer) a{
   color: var(--primary);
   font-size: 16px;
}

Note: :is is a pseudo-class it works like JavaScript if else conditions, it check element which you provide if it will found then add CSS on it or its selector.

🎉CSS functions

Stop using the value in px Why?

Many developers are use px value for width, font-size, line-height, padding, margin and other and they need to use media CSS to fix it on the small screen but CSS already provide functions that easily handle this problem, let us discuss about some important functions which you and use in your daily code life.

calc(): It allows you to perform calculations to determine CSS property values
counter(): Returns the current value of the named counter
attr(): Returns the value of an attribute of the selected element
min(): Uses the smallest value, from a comma-separated list of values, as the property value
max(): Uses the largest value, from a comma-separated list of values, as the property value
clamp(): clamps a middle value within a range of values between a defined minimum bound and a maximum bound. The function takes three parameters: a minimum value, a preferred value, and a maximum allowed value.

These functions will helps you to make responsive values

Pseudo Classes

CSS provides us with many types of pseudo-classes and we can easily handle many problems with help of it.

For example, You have a list of users and you need to add red color on the even child and blue color on the odd child, you have two ways to do it first you add a different class on the even or odd child second you use pseudo-class lets talk about second way:

li {
    color: blue;
}
li:nth-child(even) {
    color: red;
}

List down all useful pseudo-classes:

:hover
:focus
:root
:empty
:nth-child
:nth-last-child
:first-child
:last-child
:only-child
:nth-of-type
:nth-last-of-type
:first-of-type
:last-of-type
:only-of-type
:is()
:not()
:where()
:has()

Note: Checkout all pseudo classes and how to use it here

You can also use it in SCSS, SASS, LESS

Thanks for reading 🙏