CSS书写规范以及命名规则

谁践踏了优雅 2022-06-09 12:48 313阅读 0赞

#### 前言：很早就想些这篇文章了，但是自己一直懒，拖到现在才来总结 ####

**CSS书写顺序**

1.位置属性

> position  
> top  
> right  
> z-index  
> display  
> float  
> clear

2.大小属性

> width  
> height  
> padding  
> margin

3.文字属性

> font-size  
> line-height  
> letter-spacing  
> word-spacing  
> color  
> text-align

4.背景属性

> background  
> border  
> box-shadow

5.其他属性

> animation  
> transition

**CSS缩写**

> margin—-上右下左  
> padding—上右下左  
> font—font : 是否斜体 字体粗细 字体大小/行高 字体样式  
> border—–宽，样式(solid,dashed,dotted)，颜色

**去掉小数点.**

> font-size: .8rem

**颜色代码缩写**

> color: \#fff;

**注释规范**

> /\*  
> @description: 这是什么文件的css  
> @author: xiaoD  
> update: xiaoD (2017-05-2 16:23)  
> \*/

**CSS命名规范**

> li-active ——- 规范  
> li\_active ——-不规范  
> liActive ——–不规范

**多个选择器换行**

> leftbar,  
> rightbar,  
> footer \{  
> color: \#fff;  
> \}

**0后面不要添加px**

> body,  
> html \{  
> margin: 0;  
> padding: 0;  
> \}

**颜色尽量不要使用单词(十六进制转化为二进制速度更快)**  
  
**减少id的使用**  
  
**不要使用行内样式**  
  
**链接书写顺序**

> a:link \{
> 
> \}  
> a:visited \{
> 
> \}  
> a:hover \{
> 
> \}  
> a: active: \{
> 
> \}

**为选择器添加状态前缀**

> is-right \{  
> color: white;  
> \}  
> is-false \{  
> color: red;  
> \}

**CSS初始化**

html, body, div, span, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    abbr, address, cite, code,
    del, dfn, em, img, ins, kbd, q, samp,
    small, strong, sub, sup, var,
    b, i,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td,
    article, aside, canvas, details, figcaption, figure, 
    footer, header, hgroup, menu, nav, section, summary,
    time, mark, audio, video { margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent; }
    body { line-height:1; }
    article,aside,details,figcaption,figure,
    footer,header,hgroup,menu,nav,section { display:block; }
    nav ul { list-style:none; }
    blockquote, q { quotes:none; }
    blockquote:before, blockquote:after,
    q:before, q:after { content:''; content:none; }
    a { margin:0; padding:0; font-size:100%; vertical-align:baseline; background:transparent; }
    mark { background-color:#ff9; color:#000; font-style:italic; font-weight:bold; }
    ins { background-color:#ff9; color:#000; text-decoration:none; }
    del { text-decoration: line-through; }
    abbr[title], dfn[title] { border-bottom:1px dotted; cursor:help; }
    table { border-collapse:collapse; border-spacing:0; }
    hr { display:block; height:1px; border:0; border-top:1px solid #cccccc; margin:1em 0; padding:0; }
    input, select { vertical-align:middle; }

**CSS命名规则**

> header  
> content/container  
> footer  
> nav  
> sidebar  
> leftbar  
> rightbar  
> loginbar  
> logo  
> banner———————————-广告  
> hot—————————————热点  
> news  
> download  
> subnav———————————子导航栏  
> menu  
> search  
> friendlink  
> copyright  
> tags————————————-标签  
> list  
> title  
> tips  
> joinus  
> guide  
> service  
> register  
> status  
> vote  
> partnter——————————-合作伙伴