5 CSS Concepts React Developers Should Know

One of the most controversial aspects of frontend development is styling. Whether you’re using React, Angular, Vue, Svelte, or any other frontend library, you either hate it or love it. But regardless of how much or how little you enjoy the CSS part of your frontend development, it’s still an unavoidable one.

However, CSS as a topic is extremely big. Navigating your way through all the available concepts and rules can be quite daunting. Fortunately, it’s not necessary to know all the different concepts by heart. Instead, there are a set of topics that you’re more likely to need daily. This article will cover 5 of those CSS concepts based on my experience. This will give you a starting point for learning CSS or knowing which CSS topics you should potentially hone a bit more.

Layouts

No matter whether you’re just creating a landing page, a small frontend to display some data, or creating a large scale web application, all of them will require a certain layout. Knowing how to implement the different layouts, which tools or CSS rules to use, and which fit better for the specific scenario is a must for frontend developers like ourselves.

For quite some time, CSS Flexbox was the default for implementing almost any modern layout you can imagine. Although there were some exceptions and limitations with the Flexbox layout model, they were minor and quite specific to certain scenarios. Spending time mastering Flexbox and all its properties will never be a bad decision.

Nowadays, there also exists the CSS Grid layout model. With very powerful capabilities and functionalities, it can do almost everything CSS Flexbox can do and more. For some time, the main thing holding CSS Grid back was its browser compatibility. But now that every modern browser supports at least the minimum functionalities of CSS Grid, there’s no reason not to make this part of your skillset as a React developer.

CSS Selectors

Related to the topic of layouts is the content that is inside of the layouts. Very often, especially in React, layouts are populated using a list of data and a certain user interface (UI) element. This means that (parts of) the application are filled with similar-looking elements that are also similarly styled relative to the context. But between those elements, it’s also common to have relations or specific styling.

This can be done using CSS Selectors and pseudo-classes. However, there is a lot of them. There are selectors or classes to find immediate children, any descendants, siblings, adjacent elements, the first child, children at (un)even indices, the last child, and more. Being able to navigate through all the different selectors and classes is a valuable skill to have.

Box Model

If you’ve ever used CSS, you’ll be familiar with the terms margins, borders, and paddings. Together with the content area of an element, they determine the width and height of an element. The relationship between all of these aspects is called the CSS box model.

Although I wouldn’t deem a deep understanding of the box model necessary for your daily work as a React engineer, having a certain level of understanding would make your life a lot easier. This would include how the different aspects interact with each other, how the resulting dimensions are calculated, and the other existing box models

Responsiveness

Nowadays, web applications are not only designed for desktop screens. They also need to be responsive to devices with different screen sizes, like wider monitors, laptops, tablets, and especially mobile phones. Making our frontend work across all the different screens in a responsive manner is also part of our responsibilities as a frontend developer.

The most important thing to pick up in regards to responsiveness are CSS media queries. Media queries allow you to define breakpoints on-screen level and conditionally change the styling based on those breakpoints. This allows your web application to be styled differently based on the screen that it’s shown on.

In the future, we’ll also have so-called container queries about our availability. They are very similar to media queries. But instead of defining breakpoints that refer to the screen size, you’re able to create breakpoints relative to other elements or containers. This provides us with even more fine-grained control over the responsiveness of our web applications.

Content Alignment

If you’ve spent some time in frontend development already, then you’re most likely familiar with the age-old dilemma: how to center a div. While it has partly become a meme in the modern days of frontend development, the concept of content alignment is still a common struggle.

Luckily, there are quite a few ways to solve it. There is CSS Flexbox, CSS Grid, auto margins, paddings, text-align for texts, float, absolute position, transforms, and more. Familiarizing yourself with the different possibilities and solutions for content alignment will go a long way in improving your CSS skills. It’s like a long term investment.

Final Thoughts

Whether you’re new to React or already an experienced developer, it can be daunting to navigate through the large world of CSS. This article covered the 5 CSS topics that every React developer should know based on my own experience of using CSS on a daily basis. These include layouts, CSS selectors, the box model, responsiveness, and content alignment. Newer React developers can use this list as a starting point, while more experienced developers can use it to top off their existing knowledge.