How to build UI components using CSS pseudo-elements

*Important links*
Code sandbox link: codesandbox.io/s/beautiful-butterfly-7ygv1?file=/s…

Pseudo-classes and pseudo-elements: developer.mozilla.org/en-US/docs/Learn/CSS/Buildin…

Chapters:
0:00 Intro
0:16 Overview
0:36 Example of what we'll build
1:03 Coding environment
1:50 Create our first component
2:40 Styling the circle
3:30 Use CSS variables
4:05 Use the active prop
5:20 Styling UI component using CSS pseudo-elements
9:00 Power of CSS variables
9:50 Adding the final styles
13:00 Outro

These days there are a lot of designs that intuitively display information. Instead of plain old one-to-one mapping of fields in a database, we're moving towards a more human-friendly and easy-to-understand UI element. For example, icons, loaders, badges, and progress indicators.

Being front-end developers, it's our responsibility to bring such UI to life using code(or magic 🪄).

An example of such a UI element is a simple status indicator that shows how many steps have been completed in a multi-step process. Because of its visual nature, it conveys this information in an instant look.

The problem arises when we use a bunch of divs and spans to build such UI. It gets complicated, unreadable, and hard to maintain very quickly.
In this article, we will see how we can build such UI using CSS pseudo-elements and minimizing the need for divs (or spans).

We can build many UI elements using this approach. And,
that way, we eliminate the need for extra HTML elements such as div.

If you find it helpful, please give it a like and share it with someone who might benefit for it.

My name is Ashutosh, and apart from working as a Full-stack engineer, I love to share my learnings with the community.
You can connect with me on LinkedIn: www.linkedin.com/in/iamashutoshbhardwaj/
or follow me on Twitter: twitter.com/BhardwajAshu96
Blog: dev.to/ashu96/


#UI #web_development #react #buildingui #building_components #CSS #HTML #design #code #programming #advanced_design #learning