Tip: Styles always appear as a combination of specific attributes
A good example is the combination of color and bakground-color. Unless you only tweak them, you need to adjust them together. When you add a background color to an element, it may not contain any text, but there may be some child elements. So, together we set the foreground color and background color (background-color), and we can always be sure that these elements don't experience any legibility or contrast issues. The next time we change the background color, there is no need to look around for the text color that needs to be modified, because they all appear together in a combination.
Tip Two: Using dynamic values, such as CurrentColor and EM
Sometimes the text color is also used on other properties. For example, border, Box-shadow, or the fill on the SVG icon. There is an alternative to defining the same color, and you can use CurrentColor directly. By default, color can be inherited, and you can change the color of other properties only if you modify it in one place.
Similarly, using EM units for the Font-size attribute allows you to modify only: root font-size can change the size of the box model of the element.
Tip Three: Use the Inherit property value to inherit its parent element style to override the UA style.
form controls, such as button and input, will have their own style style (UA style) for each browser. We can override the browser's UA style by inheriting its parent element style using inherit.
Button,input,select,textarea { color:inherit; Font-family:inherit; Font-style:inherit; Font-weight:inherit;}The example code above is taken from Sanitize.css, Normalize.css, and so on. If you are not using this, you have ...
You can also try to automatically match colors directly on elements such as input[type= "range", input[type= "Radio" and input[type= "checkbox" using the CurrentColor property described earlier. Maybe you don't need to change anything, you can turn a bright color into a dark colour.
Tip Four: Whenever you write CSS, you want to go back to the top of the tree as much as possible. In other words, back to: root.
For example, our site has a sidebar that wants to add a brief personal introduction to this sidebar. The structure of its HTML might look like this:
<body> <main class= "Posts" > <aside class= "SideBar" > <nav class= "NAV" > <p class= "Bio" >
The CSS is written like this:
. Bio { font-size:. 8em; line-height:1.5; Color: #888;}This kind of writing works, and there is no style problem. However, the sidebar also has a navigation nav, and it is possible that some of them have the same style. Font-size and color are the same in our example. Let's take these attributes from Nav and. Bio, and add them to their parent elements. In sidebar:
. SideBar { font-size:. 8em; Color: #888;}It turns out that line-height:1.5 has been set up in. posts;. It seems that the entire page is using the same row height, then we can put the. Line-height in bio and. Posts are moved to the root element:
: root { line-height:1.5;}This may seem like a CSS common sense, but he will not focus too much on sibling elements to define the same thing. This also lets you find that some code produces duplicates. It's not scary, because we just have to take the time to refactor the code, but that keeps the CSS's code-handling health state.
Write styles on tree branches instead of writing styles on leaves
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
