Front End (HTML/CSS/JS)-CSS Coding specification

Source: Internet
Author: User

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

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.