css CSS编码标准

Posted 2021-05-13

/*
	1. Structure
	2. Selectors
	3. Properties
	4. Property Ordering
	5. Vendor Prefixes
	6. Values
	7. Media Queries
	8. Commenting
*/



/* --------------------------------------------- Structure -- */
/* Correct */
#selector-1,
#selector-2,
#selector-3 {
    background: #fff;
    color: #000;
}

/* Incorrect */
#selector-1, #selector-2, #selector-3 {
    background: #fff;
    color: #000;
    }
 
#selector-1 { background: #fff; color: #000; }

/* --------------------------------------------- Selectors -- */
/* Correct */
#comment-form {
    margin: 1em 0;
}
 
input[type="text"] {
    line-height: 1.1;
}

/* Incorrect */
#commentForm { /* Avoid camelcase. */
    margin: 0;
}
 
#comment_form { /* Avoid underscores. */
    margin: 0;
}
 
div#comment_form { /* Avoid over-qualification. */
    margin: 0;
}
 
#c1-xr { /* What is a c1-xr?! Use a better name. */
    margin: 0;
}
 
input[type=text] { /* Should be [type="text"] */
    line-height: 110% /* Also doubly incorrect */
}

/* --------------------------------------------- Properties -- */
/* Correct */
#selector-1 {
    background: #fff;
    display: block;
    margin: 0;
    margin-left: 20px;
}

/* Incorrect */
#selector-1 {
    background:#FFFFFF;
    display: BLOCK;
    margin-left: 20PX;
    margin: 0;
}

/* --------------------------------------------- Property Ordering -- */
/* 
    1. Display
    2. Positioning
    3. Box model
    4. Colors and Typography
    5. Other 
*/
/* Correct */
#overlay {
    position: absolute;
    z-index: 1;
    padding: 10px;
    background: #fff;
    color: #777;
}

/* Incorrect */
#overlay {
    background: #fff;
    color: #777;
    padding: 10px;
    position: absolute;
    z-index: 1;
}

/* --------------------------------------------- Vendor Prefixes -- */
/* Correct (longest to shortest) */
.sample-output {
    -webkit-box-shadow: inset 0 0 1px 1px #eee;
    -moz-box-shadow: inset 0 0 1px 1px #eee;
    box-shadow: inset 0 0 1px 1px #eee;
}

/* --------------------------------------------- Values -- */
/* Correct */
.class { /* Correct usage of quotes */
    background-image: url(images/bg.png);
    font-family: "Helvetica Neue", sans-serif;
    font-weight: 700;
}
 
.class { /* Correct usage of zero values */
    font-family: Georgia, serif;
    line-height: 1.4;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5),
                 0 1px 0 #fff;
}

/* Incorrect */
.class { /* Avoid missing space and semicolon */
    background:#fff
}
 
.class { /* Avoid adding a unit on a zero value */
    margin: 0px 0px 20px 0px;
}
 
.class {
    font-family: Times New Roman, serif; /* Quote font names when required */
    font-weight: bold; /* Avoid named font weights */
    line-height: 1.4em;
}

/* --------------------------------------------- Media Queries -- */
/* Correct  (at the bottom of the stylesheet) */
@media all and (max-width: 699px) and (min-width: 520px) {
 
        /* Your selectors */
}

/* --------------------------------------------- Commenting -- */
/* For sections and susections */
/**
* #.# Section title
*
* Description of section, whether or not it has media queries, etc.
*/
 
.selector {
    float: left;
}

/* For inline */
/* This is a comment about this selector */
.another-selector {
    position: absolute;
    top: 0 !important; /* I should explain why this is so !important */
}

/* There, a potatos 0 */