What CSS Do You Absolutely Have to Know in 2022?

CSS is developing rapidly, with increasingly powerful functions, and the learning curve is steeper. This article will explore which CSS knowledge is absolutely necessary in today's front-end development.

Sacha Greif has publicly questioned whether CSS is too large. In recent years, browsers have added many new features - container query, relative color syntax, cascade layer, logical properties, media query scope, independent transformation, :has() selector, etc. In the future, CSS switching, nesting, color mixing, scroll link animation, scope style, etc. may also appear. This undoubtedly brings new learning challenges to both beginners and senior front-end engineers.

It has become a past tense to fully grasp all CSS properties and how they work. So, which CSS knowledge is absolutely necessary?

Vincas Stonys and Chris tried to list related lists respectively. If you need to list the five most important CSS properties and selectors, my list is as follows:

writing-mode Attributes

writing-mode Attributes are crucial, especially when it comes to learning. It helps you master the principles of inclusive design and create the right layout regardless of the user's language. Understanding writing-mode will guide you to understand logical properties and values, and then to understand document flow, and think from logical directions such as blocks, inlines, starts and ends rather than physical directions.

display Attributes

Without solid attribute knowledge, it is difficult to write excellent CSS code. It is both a property and a framework for creating layouts. Without it, there is no Flexbox or CSS Grid, so it is key to understanding these important features. display

In addition, the

attribute and the display attribute complement each other. Once writing-mode gives you an idea of ​​the document flow and logical direction, the writing-mode attribute is exactly what you need. You can use it to change the normal flow of an element (e.g., change the block element to an inline element) or start the layout (e.g., create a flexible layout context). display

, margin and padding properties border

These three properties are part of the box model and are used to control spacing and styles, and all require understanding of CSS length units. Understanding the functionality of these properties and how they affect the computed size of elements will greatly improve your style control and eliminate common CSS issues where element sizes do not match expectations.

and ::before pseudo-elements::after

and ::before are two pseudo-elements that are usually learned together. They can be used to create a variety of UI effects, even full single div illustrations, showing the power of CSS. ::after

Query@media

Queries are the key to creating flexible responsive layouts and different viewing contexts. As container queries mature, it may be replaced, but for the moment, @media queries are an excellent introduction to learning responsive design. @media

In addition, the @media query gives you a preliminary understanding of the conditional characteristics of CSS. Whether based on device type (e.g., screen or print) or browser viewport conditions (e.g., width >= 768px), the @media syntax is very useful to create layouts optimized for different conditions. The @media query is also related to accessibility because it can apply styles according to the user's preferences (e.g., prefers-reduced-motion).

Other attributes and selectors worth mentioning

Of course, there are many other important CSS properties and selectors, such as:

• calc()
• has()
• color
• font
• overflow
• position (Especially important)
• z-index

Learning CSS is more important than rote attribute lists. It's a step-by-step process, and the five properties and selectors I've chosen can help you lay a good foundation and prepare you for a deeper learning of CSS.

The above is the detailed content of What CSS Do You Absolutely Have to Know in 2022?. For more information, please follow other related articles on the PHP Chinese website!