1. Chinese symbol centering effect
You don't need to care about the dynamic output text. Some pages may have a place similar to the prompt copy. Using English punctuation marks is more friendly to the centering effect.
2. The upper and lower spacing of elements
When laying out, the page is written from top to bottom. Generally, the margin-top of the next element is written to determine the distance from the previous element. Then try not to write margin-top and margin-bottom. It is easy to use, but it is not easy to maintain later. For example, a certain area needs to be stacked, or a component may be shared by many places. If it is mixed and written, it may be a little troublesome when it is changed later. The problems caused here can be said to be painless. Itching, but whether it is js or css, paying attention to details and developing good habits is a manifestation of coding ability.
3. Transparent font color
Sometimes designers may use the percentage of transparency to set several different colors when configuring the font color. For example, the main color is #000, and the light gray #000 is 80% transparency. In this case, it is not recommended to write transparency on the web , but let the designer give the corresponding color value, because the transparent color will be different according to the background, such as the situation seen now, so the scalability is relatively poor.
4. Naming
Naming is one of the most tangled things. Let’s look at the first one first, so that the more detailed naming can clearly know the meaning of the current class, but the length is relatively long, which increases the amount of code.
eg: .nav-btn-float-right
The second uses abbreviated names, making the code shorter and faster to write, but less readable.
eg: .nav-btn-fr
If you use abbreviated naming, you can agree on documents, there are conventions and familiarity costs, but after familiarity, it will be more efficient, and the naming of classes will become more standardized and unified.
5. Misunderstanding of 0.5px border
When I wrote about borders before, I found that as long as the color of the border is lighter, the border looks thinner, so when designers ask me why the border looks thicker, I tell them to make the color lighter. , this trick I've been using in practice. There is a blog on the Internet saying that a 0.5px border can be achieved by scaling the scale of css3 transform by 50%. I have always been very strange. 1px is actually the smallest physical unit. How can it be possible to achieve 0.5px, so I did an experiment, I set 1px Border (black) with color 000.
When using scale to zoom by 50%, the color becomes c5c5c5, but the actual size is still 1px. I use the color picker tool, which is accurate to the pixel, and it is still 1px, so this method does not achieve 0.5px but the color becomes lighter. There are also some mobile phone screens that display 1px as 2px, so this method can make 2px scaled to 1px, and make the 1px border thinner. This method can indeed make the border thinner, but it cannot be said to be 0.5px.
6、user-select:none
This property makes the content of the area unselectable. It can prevent users from long-pressing to copy, and can also prevent users from copying irrelevant content. For example, I only want users to copy the 6655 verification code. Except for 6655, I have set user-select: none, and long-press other There is no copy button in some parts, the button number is enough, and the left and right subscripts of the third picture can only be dragged between 6655
When binding events for the dom, you may directly bind the current styled class, which will affect JS by modifying or replacing the class name, and if you define an unstyled js-prefixed class specifically for binding events , which decouples style and logic. When reading the code, you can see which elements are bound to events at once. eg: <div class="item js-item"></div>
8. The text size of the rem layout
We all know that browsers generally do not make the text smaller than 12px. If the setting is smaller than 12px, the browser will display 12px. When we use the rem layout, the elements will be scaled proportionally according to the screen width. For example, the designer gives 750px. In the design draft, if the text of an element is 22px, then when the user's screen width is 375, the text will be scaled to 11px, and the actual browser will display it to a minimum of 12px, then the proportion of other non-font elements will still be reduced, this At that time, the proportion of the font and other elements may not be the proportion of the original design draft. If the user's screen is 320px, then the proportion between the elements and the original design draft is much worse. Therefore, we must tell the designer according to our own situation, in the design draft with a width of 750 pixels, the minimum font size should be how many pixels.
eg: design draft 750px, text 22px
Design draft 375px, text 11px (12px)
9、object-fit: cover
When we are making the list page, the pictures are all fixed size, such as a 100px*100px square picture, but it is very likely that the picture we get is not square, this non-square picture is placed in the square img tag, It will be deformed. If you use object-fit: cover, you can crop the part that exceeds the proportion, so that the picture will not look deformed or stretched, but this will cause the picture to be incomplete. Depending on the picture, the key part may be cropped. content, but since the list is originally a thumbnail, this attribute can still be added, which is a compromise.
10. The convention of pictures
When it comes to the problem of picture stretching, we must talk about the agreement on the picture, because whether it is stretching or cropping, it will lead to the disability of the picture, stretching affects the vision, and cropping is afraid of losing key parts. If you do not strictly follow the agreed specifications, It is definitely not compatible with all situations, so at the beginning of the project, you must agree with the product operators on the proportion of the picture, and it is recommended to agree to a square.
11. Only use !important as a last resort
Defining !important on a class is a way to have code overridden, especially when you're trying to handle media queries. And it's cumbersome for mobile. For example, if you want to display something on the mobile screen, you must override the .hide class with another !important class to display it on the mobile device. I don't find a reasonable excuse to use !important unless you misplaced the !important class before overriding someone else.
12. Best practices for box-sizing
There are three main questions to answer here:
Question 1: For the value of box-sizing, is it better to take content-box or border-box?
If compatibility with IE6 and 7 is required at least, then box-sizing cannot be used, and only the W3C box model can be used;
If you only need to be compatible with IE8 at least, then there is no problem in using content-box in function, but it will be a little more troublesome in the implementation of some flexible layouts and responsive layouts; and border-box performs better in these aspects, but it cannot It is used together with the four attributes of IE8's min-width, min-height, max-width and max-height. If you use it, you should pay attention to it;
If you only need to be compatible with IE9 at least, then I think that the global configuration is more suitable for content-box, and the local configuration can be both. The reasons are as follows:
CSS3 provides the calc function (IE9+), which makes the W3C box model a powerful assist, and its performance in elastic layout and responsive layout is no different from the IE box model;
The principle of default is better than configuration: I personally think that "default is better than configuration", especially in the architecture-level and platform-level configuration files such as reset.css, it is necessary to try to avoid being intrusive to the modules that may be introduced in the future. For example, we often need to introduce third-party components in a project. If the component does not strongly declare box-sizing, then it uses the W3C standard box model by default. If the value of box-sizing is set in the global reset.css border-box to use the IE box model, then it will affect the style of this type of third-party components based on the W3C box model by default. It also reminds us that when encapsulating components, remember to strongly declare box-sizing, even if you use the default content-box.
In short, the two can be interchanged in most scenarios, but the concept of use is different. In a small number of scenes, border-box has more advantages, but with the support of calc function, this advantage is no longer. On the contrary, the advantage of content-box being the default value is more and more obvious.
My personal suggestion is: use the default W3C box model globally (your CSS code is compatible with IE6/7 at least, and can also be used with min- and max- in IE8), and both in local scenes (only use the IE box model as as a layout trick to use). You can use the IE box model globally, as long as you confirm that the project only needs to be compatible with IE8, even if it may affect the imported third-party components, there are ways to deal with it.
Question 2: If you want to use the IE box model globally, how to set box-sizing in reset.css?
Here is a reference:
html {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
*, *:before, *:after {
-webkit-box-sizing: inherit;
-moz-box-sizing: inherit;
box-sizing: inherit;
}
The benefits of this setup are:
The box model type of the child element is determined by the parent element by default, which is convenient for the unified setting of components;
Supports older browsers: Safari (< 5.1), Chrome (< 10), and Firefox (< 29);
Question 3: Starting from Bootstrap3, the IE box model (box-sizing takes border-box) is used globally. What are the considerations? How to coordinate the relationship with third-party components developed based on the standard box model?
As we all know, BS2 also considered compatibility with IE7, while BS3 completely abandoned compatibility with IE7 and set box-sizing to border-box.
Knowledge point
Regular small session:
\d matches any decimal number, equivalent to [0-9]
\D matches any non-digit character, equivalent to [^0-9]
\s matches any whitespace character, equivalent to [\t\n\r\f\v]
\S matches any non-whitespace character, equivalent to [^\t\n\r\f\v]
\w matches any alphanumeric character, equivalent to [a-zA-Z0-9_]
\W matches any non-alphanumeric character, equivalent to [^a-zA-Z0-9_]
-------------------------------------------------------------------------------------------------------------
Compatible gradient background effects
The relevant code is as follows:
.gradient{
width:300px;
height:150px;
filter:alpha(opacity=100 finishopacity=50 style=1 startx=0,starty=0,finishx=0,finishy=150) progid:DXImageTransform.Microsoft.gradient(startcolorstr=red,endcolorstr=blue,gradientType=0);
-ms-filter:alpha(opacity=100 finishopacity=50 style=1 startx=0,starty=0,finishx=0,finishy=150) progid:DXImageTransform.Microsoft.gradient(startcolorstr=red,endcolorstr=blue,gradientType=0);/*IE8*/
background:red; /* Some browsers do not support background gradients */
background:-moz-linear-gradient(top, red, rgba(0, 0, 255, 0.5));
background:-webkit-gradient(linear, 0 0, 0 bottom, from(#ff0000), to(rgba(0, 0, 255, 0.5)));
background:-o-linear-gradient(top, red, rgba(0, 0, 255, 0.5));
}
<div class="gradient"></div>