Shulou(Shulou.com)06/01 Report--

This article will share with you about CSS's tips for simplifying code. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

Note: for the sake of brevity, the compatibility scheme for custom properties will not be discussed below, but in the actual project, don't forget to add, like this:

DRY principle

By sticking to the DRY principle, you can not only escape the nightmare of repeatedly writing values, but also ease the repetitive work of searching, replacing, and debugging when adjusting attribute values. That is, the DRY principle can reduce the cost of code maintenance.

Let's take a look at an example. The following code is pretty bad, repeating the value of gray several times:

If you want to change the theme color, you need to adjust the property values in three places, and be careful not to change the color value of .caption.

So what is the use of CSS variables? Define one place, use it everywhere! After introducing-- theme-color:

After using the CSS custom property as the variable of the theme color, once you want to adjust it, you only need to change one place to take effect globally. Not only that,-- the variable name theme-color has taken on semantics. When we used gray before, we didn't know whether the font color of a particular element needed to change when the theme color changed. After using this variable, there is no such trouble.

It is also best to use custom attributes to control the caption text of the title:

The journey has just begun, let's go on!

It's time to put down the calculator.

In the CSS Custom Properties: fundamentals, we mentioned that custom properties are combined with calc () to implement runtime calculations. Under this premise, consider how to implement the following grid layout:

For those of you who are familiar with the CSS box model, you should be familiar with the above code: the wide margin of 16px, and the wide gap of 16px between .image. But from a CSS point of view, this code is not intuitive enough to represent the final grid effect, and what we really care about cannot be highlighted from the code.

From a design point of view, the grid spacing and container edge width are both 16px, which is the most important point. Our goal is to intuitively feedback the design intention, and getting the results directly has no meaning other than realization for us. And setting these two values separately also has maintenance costs.

If you combine custom attributes with calc (), the code becomes more intuitive:

Now, we can see the calculation process directly, and it is convenient to adjust the value if we want to. You can even make the variable page-level, using the value of-- page-grid as the base value for other elements:

In the above example, we need to do some intermediate calculations in calc () to make the final code clearer.

Note: there are still some problems with Safari/WebKit 's current calculation in calc (), which are expected to be resolved in Safari 10.1.

Readable change

So far, we've focused on using a definition of CSS custom properties everywhere, but it's more powerful than that, and you can do it if you want to change the value of a variable in a particular situation.

Let's look at a responsive grid implemented in flexbox:

The above code implements a set of responsive layouts, but at first glance, it seems confusing. By default, pictures are arranged in a row, that is, only one picture is displayed in a row; if the screen size is 600px, 1024px... Accordingly, the picture arrangement becomes three or six columns. As in the previous code example, the container edge width and grid spacing are both 16px.

The calculation in calc () is complex, and we need to explain it with annotations. But if you use custom variables, the situation is different:

It can be seen that all the calculations are done in one place. The only thing that needs to be changed in the media query is the value of the custom property. Now even people who have just seen this code can read it quickly. And no longer need to keep using calc () to do all kinds of calculations, but also avoid the problems caused by typos.

Note: some of the above uses may be too complex for CSS preprocessors and may not generate code as expected in practice.

The CSS custom attribute plays an important role in determining the stored value. Next we will explore the use of custom properties as a bridge between CSS and JavaScript. Next, let's see what a combination of CSS custom properties and JS can do.

Guarantee the independence of CSS and JavaScript through CSS Class

In most cases, we want CSS and JavaScript to be decoupled. The simplest and most maintainable way is to use a well-semantic CSS class. Dynamically add or remove class through JS to change the visual effect:

This eliminates the need to add inline styles through JS, which is only responsible for triggering visual changes, and the real visual change is CSS. Conversely, if you need to change the trigger event but still use the same visual change effect, just modify the JS code.

Note: it is recommended that you distinguish between CSS class controlled by JS and the default class. For example, adding the prefix of js- (see the code snippet above) is a good choice.

Pass values in CSS and JavaScript

The addition or removal of class is appropriate in black-and-white scenarios, but the situation is often complex and some values may need to be passed in dynamically. For example, in scenarios related to user input, certain visual representations are determined based on the user's input.

Suppose you now have a container element, and we want to move to the last place when the user clicks on it. If we set an auxiliary element in the container, we can move it like this:

Although the above code can achieve the desired effect, JS not only needs to directly manipulate the auxiliary element (ideally, it should not even know that this element exists), but also needs to modify the transform attribute value of this element through the inline style.

Up to now, there is still no perfect solution to this problem. But with custom attributes, we can at least abstract this solution a little bit:

Now that we're back to dealing with visual representations with CSS, we no longer need to change inline styles through JS. In fact, even auxiliary elements can be replaced by:: after pseudo elements:

Tip: it is not easy to modify the style of pseudo elements (such as:: after) directly through JS. You can consider using the

Use custom properties as a bridge between JavaScript and CSS. This is a simple and easy to maintain solution!

One variable, used in multiple places

Logical changes may be accompanied by changes in large areas of visual performance. A typical example is the selection of a theme, which may cause visual changes in most elements when changing the theme.

Take the music player as an example, if you want the interface color to change with the change of the current listening album, you used to need to maintain a series of elements and attributes that would change color, and change them in turn as needed:

The structure of HTML is as follows:

In any case, always update elements and attributes that change with the theme, so this approach makes subsequent maintenance difficult.

Another solution is to introduce a new style that will overwrite the old style. This approach is relatively good (although it's hacky), but it still doesn't avoid having to cover a range of styles, which still have maintenance costs:

But by customizing attributes, the problem can be greatly simplified: just change the element at the highest point in the DOM structure, and then let the browser change the node under that node:

JavaScript does not need to know which elements and which attributes will change at all, nor does it require developers to maintain a list of affected elements. Using custom elements is obviously better than the scheme in the previous article!

Meaning

Reduce the operation on CSS class and let CSS custom properties help you build a page where JS and CSS are decoupled.

The CSS custom attribute performance limits any changes to the runtime to a clearly defined set of entities that exist for interaction. This also makes it easier for developers to locate bug and separates style from behavior.

Since styles and logic are independent of each other, styles are implemented only by CSS, and logic is done only by JS, making it easier to maintain.

Thank you for reading! This is the end of this article on "what are the tips for simplifying code in CSS?". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it for more people to see!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.