In this article, I'll show you some examples of CSS tips that let you know how to use CSS to be more user-friendly, reduce unnecessary requirements, and reduce the weight problems.
Skill One
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
Skill Two
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.
Skill Three
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.
More details on this can be found in the article "Using Strings (STRINGS) to set styles".
Tip Four
Override the UA style by inheriting its parent element style with the Inherit property value.
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 is also used in this way. 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.
Summarize
These are good things, of course not forcing everyone to use them. I would like to say that these tips, simple and practical, so that your Web site can obtain the greatest benefits. Even if you use a CSS preprocessor, they will not compromise the output of the code, or even set a few variables.
Also suitable for a single class name, such as Tachyons. You might also be able to reduce complexity and the classes you need.
Another interesting thing is about to come, so you can also customize the property in CSS, which is the CSS variable. Unlike a preprocessor, when you overwrite a custom property, it only affects the current selection. So in a sense, they are "cascading variables".
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
