1. File name specification
The file name suggests a way to add a horizontal line in lowercase letters . Why is it? Because it is more readable and looks more refreshing
Https://stackoverflow.com/questions/25704650/ Disable-blue-highlight-when-touch-press-object-with-cursorpointer
So why does the variable name not use lowercase letters and dashes?
Family_tree
Because the underscore is more difficult to knock (Shift +-), so the general use of the hump-named variable of the majority.
The link to the CSS file can be used without type= "TEXT/CSS"
<rel= "stylesheet" href= "Test.css">
Because the most important link inside is the rel attribute, can not type, but not without rel.
JS is the same reason, can not use type
<src= "Test.js"></script>
2. Do not use style features to name
Some people may prefer to name it with style
. Red-font { color: red;} . P1 { font-size: 18px;} . P2 { font-size: 16px;}
The name of the class should use the logical meaning that it represents ,
such as Signup-success-toast, Request-demo, agent-portrait, Company-logo and so on.
3. Reduce coverage
The following code, in order to let each house in the middle of the 20px spacing, but the first house do not have spacing:
. House { margin-top: 20px;} . House:first-child { margin-top: 0;}
Actually, it can be changed.
. House +. House { margin-top: 20px;}
Choose. House after all. House, the first one unchecked, this looks like the code is much more concise.
This is also the case, as shown in the following code:
. Request-demo input { border: 1px solid #282828;} . Request-demo Input[type=submit] { border: none;}
You can actually use a: not selector:
. Request-demo Input:not ([type=sbumit]) { border: 1px solid #282828;}
4. Write more Comments (1) Comments at the top of the file
/**/
(2) Simple comment
/* to remove the gray background when the input box and form clicked */ input, Form { -webkit-tap-highlight-color: rgba (255, 255, 255, 0);}
5. Attribute value Specification (1) If the value is 0, usually no unit
. List { border: 1px solid 0; margin: 0;}
(2) color value with hex, less RGB
Because using RGB is a function, it also calculates the conversion. If it is a re-use RGBA with transparency.
If the color value of the six number is the same, then write 3 is good:
Color: #ccc;
(3) Note the difference between border none and 0
The following two meanings are the same
border:0;border-width:0;
And the following two are the same:
Border:none;border-style:none;
So use 0 and none to remove the border.
6. Do not set too large a z-index
Some people like to set z-index very large:
z-index:99999;
Think he is the eldest, no one is taller than him, but mantis stalks, Oriole, will soon have to write another:
z-index:999999
Usually the z-index of the business logic of their own pages should be kept in single digits.
7. Note that float/absolute/fixed positioning is forced to block
{ float: left; Display: block; width: 100px; height: 30px;}
The second line of Display:block is actually useless, because if you float, the target element will have the properties of the block-level box model, even if you display:table-cell or inline.
8. Clear Floating
Clear floating there are many ways, generally with clearfix Dafa, although this method is flawed, but it is relatively simple and can be applied to the vast majority of the scene, a compatible with IE8 and above the clearfix of the wording
. Clearfix:after { content: ""; display: table; Clear: both;}
9. CSS Animation specification
(1) Do not animate with the all property
Do not use all properties when animating with transition, there may be some problems with some browsers, as follows
Transition:all 2s linear;
The right thing to do is to use which property to animate, and if there's more than one, separate it.
Transition:transform 2s linear, opacity 2s linear;
(2) Use transform instead of position to do animation if you can use transform to do animation, you will not use Left/top/margin, etc., because transform will not cause repainting, performance than position those much higher, Especially on the mobile side when the effect is more obvious. Basically the animation of the displacement can be completed with transform, do not need to use the CSS2 properties, such as a box from right to left pop. (3) prefer to use CSS animation instead of JS animation for example, a box, from bottom to top pop up, you can use jquery's slideup function, or write your own setinterval function processing, but these are not better than using CSS. Using CSS, the initial state can move the box translate outside the screen, and then click on the time add a class, this class transform value of 0, and then use transition do animation is good. 10. Inline elements can be set directly margin-left/margin-right
Here are some people who set up span display:inline-block in order to keep span open:
Span.phone-numer { display: inline-block; margin-left: 10px;}
In fact, the line element can be directly around the margin, you can open it, do not need to set Inline-block:
span.phone-numer{ margin-left:10px;}
It is also important to note that the Img/input/textarea/button default is Inline-block, no longer set.
Front End (HTML/CSS/JS)-CSS Coding specification