Back to basics
CSS cascades are a curse and a blessing at the same time. Usually they work quite well, but there are problems that bring people to the point, so that they begin to wonder if they really need this CSS. I also relate to such people in some respects, but I believe that it’s not so much the cascades that are to blame as the struggle with the specifics. Do not face problems with specificity is difficult.
In this article I will try to show several ways how to make friends with cascades and, perhaps, reduce the need for duplication, thereby reducing the fight against specifics to a minimum.
When prescribing each CSS property, try to move it as high as possible along the hierarchy. In other words, back to basics.
For example, we have a sidebar on our website, and we want to add a small biography to it. The markup should look like this:
And CSS is like this:
That should work. But it may be that some elements have the same styles. In our case, this is font-size and color. Therefore, let's move these properties from the navigation (Nav) and biography (Bio) to a common parent element - the sidebar (SideBar).
Also assume that the line-height attribute is: 1.5; should be defined for our messages. Therefore, since the same row height is used across the entire page, let's move this attribute from the Bio and Post elements to root.
This may seem obvious, but often we really want to design a new element, without looking at the fact that one of the related elements has the same attributes. In addition, this happens when you copy styles from other sections or insert any snippets found on the Internet. Reorganizing the code may take a little longer, and it looks pretty scary, but it will keep the CSS in a healthier way.
')
Make out branches, not every leaf.
Make out certain properties in the form of combinations.
An excellent example is the combination of color (color) and background-color (background color) attributes. Unless you make small changes, these attributes are best changed together. When you add an element's background color, it should not contain text, and any child element can. Therefore, if we simultaneously adjust the foreground and background color, we can make sure that we do not have any problems with compatibility or contrast. Also, the next time we change the background color, we don’t have to look for all the text colors that we also need to change, because they are all next to each other.
Use "dynamic" values, such as currentColor and em.
Sometimes it makes sense to use the text color attribute for other properties. For example, for the border, box-shadow, or fill attributes for SVG icons. Instead of specifying them directly, you can use currentColor, which duplicates the color attribute property. Since color is inherited by default, it is enough to change it only in one place.
In the same way, em is mapped to font-size, allowing you to scale any elements by simply changing the font size to: root.
This shows more detailed information on currentColor and EM.
Duplicate UA styles in inherit from parent elements.
Create controls, such as buttons and input fields, designed by the browser in a certain way. By duplicating them with the inherit attribute, you can adapt them to your own styles.
The above example is taken from sanitize.css. normalize.css, and it does the same, so if you take advantage of these elements, consider that you are ready.
You can also try re-arranging other input elements, such as a slider, radio button, checkbox, etc. And, as shown above, using currentColor, make them automatically take into account the color property. And also change the theme from light to dark, without changing anything.
All this is nice, but who needs it? Of course, you should not use all these approaches by force in every situation. I would say that this is best for small, simple sites. But even when using a preprocessor, nothing bad will happen if the amount of CSS that gets the output is reduced, or if several variables are simply not needed.
It is also suitable for "special classes", such as in Tachyons. This will help reduce the complexity and number of required classes.
Another interesting point is the promising custom properties, such as CSS variables. Unlike variables in preprocessors, when you duplicate a custom property, it only affects the current selector. Therefore, they will be something like “cascading variables”. But I still need to check and see how it works in practice.
In this article I will try to show several ways how to make friends with cascades and, perhaps, reduce the need for duplication, thereby reducing the fight against specifics to a minimum.
Tip 1:
When prescribing each CSS property, try to move it as high as possible along the hierarchy. In other words, back to basics.
For example, we have a sidebar on our website, and we want to add a small biography to it. The markup should look like this:
<body> <main class=“Posts”> <aside class=“SideBar”> <nav class=“Nav”> <p class=“Bio”> And CSS is like this:
.Bio { font-size: .8em; line-height: 1.5; color: #888; } That should work. But it may be that some elements have the same styles. In our case, this is font-size and color. Therefore, let's move these properties from the navigation (Nav) and biography (Bio) to a common parent element - the sidebar (SideBar).
.SideBar { font-size: .8em; color: #888; } Also assume that the line-height attribute is: 1.5; should be defined for our messages. Therefore, since the same row height is used across the entire page, let's move this attribute from the Bio and Post elements to root.
:root { line-height: 1.5; } This may seem obvious, but often we really want to design a new element, without looking at the fact that one of the related elements has the same attributes. In addition, this happens when you copy styles from other sections or insert any snippets found on the Internet. Reorganizing the code may take a little longer, and it looks pretty scary, but it will keep the CSS in a healthier way.
')
Make out branches, not every leaf.
Tip 2:
Make out certain properties in the form of combinations.
An excellent example is the combination of color (color) and background-color (background color) attributes. Unless you make small changes, these attributes are best changed together. When you add an element's background color, it should not contain text, and any child element can. Therefore, if we simultaneously adjust the foreground and background color, we can make sure that we do not have any problems with compatibility or contrast. Also, the next time we change the background color, we don’t have to look for all the text colors that we also need to change, because they are all next to each other.
Tip 3:
Use "dynamic" values, such as currentColor and em.
Sometimes it makes sense to use the text color attribute for other properties. For example, for the border, box-shadow, or fill attributes for SVG icons. Instead of specifying them directly, you can use currentColor, which duplicates the color attribute property. Since color is inherited by default, it is enough to change it only in one place.
In the same way, em is mapped to font-size, allowing you to scale any elements by simply changing the font size to: root.
This shows more detailed information on currentColor and EM.
Tip 4:
Duplicate UA styles in inherit from parent elements.
Create controls, such as buttons and input fields, designed by the browser in a certain way. By duplicating them with the inherit attribute, you can adapt them to your own styles.
button, input, select, textarea { color: inherit; font-family: inherit; font-style: inherit; font-weight: inherit; } The above example is taken from sanitize.css. normalize.css, and it does the same, so if you take advantage of these elements, consider that you are ready.
You can also try re-arranging other input elements, such as a slider, radio button, checkbox, etc. And, as shown above, using currentColor, make them automatically take into account the color property. And also change the theme from light to dark, without changing anything.
Conclusion
All this is nice, but who needs it? Of course, you should not use all these approaches by force in every situation. I would say that this is best for small, simple sites. But even when using a preprocessor, nothing bad will happen if the amount of CSS that gets the output is reduced, or if several variables are simply not needed.
It is also suitable for "special classes", such as in Tachyons. This will help reduce the complexity and number of required classes.
Another interesting point is the promising custom properties, such as CSS variables. Unlike variables in preprocessors, when you duplicate a custom property, it only affects the current selector. Therefore, they will be something like “cascading variables”. But I still need to check and see how it works in practice.
Paysto payment solutions for Habr readers:
→ Get paid by credit card right now. Without a site, PI and LLC.
→ Accept payments from companies via the Internet. Without a site, PI and LLC.
→ Acceptance of payments from companies for your site. With document circulation and exchange of originals.
→ Automation of sales and service transactions with legal entities. Without intermediary in the calculations.
→ Accept payments from companies via the Internet. Without a site, PI and LLC.
→ Acceptance of payments from companies for your site. With document circulation and exchange of originals.
→ Automation of sales and service transactions with legal entities. Without intermediary in the calculations.
Source: https://habr.com/ru/post/267115/
All Articles