前言在项目开发中，CSS名称的命名和书写总是比较混乱，对代码的可读性和维护性提出了挑战，所以业余时间阅读了一些内容是总结如下...1.命名规则说明，所有名字最好小写。属性的值必须用双引号（""）括起来，并且必须有一个值，如class="divcss5",id="divcss5"每个标签必须有开始和结束，并且必须有正确的层次分明，布局规整。空元素必须有一个结束标签或在开始标签后加“/”以表明它与结构完全分开。代码中没有代码。涉及任何表现元素，如style,font,bgColor,border等。给每个表单添加一个唯一的，结构化的标签id，为图片添加alt标签，尽量不要缩写，除非你一眼就看懂单词，我不知道用“.”没关系（小写句点）选择符号的开头来命名，或者用“#”（井号）选择符号的开头来命名，但是我们最好按照，main，important，special最外面的框来命名选择符号以“#”（井号）开头，其他以“.”命名。（小写句点）在选择符号的开头。如果名字太长，可以使用横线但拒绝使用下划线（IE6开头可能有解析错误，为了区分JavaScript变量名）bad.miantitle{color:#e3c;}.mian_title{颜色：#e3c;}good.mian-title{颜色：#e3c;}11.你需要非常清楚属性缩写属性值的正确顺序，而且在大多数情况下，没有必要设置属性缩写中包含的所有值，因此建议声明它尽可能分开，使之更清楚；margin与padding相反，需要简写。更详细的规则可以参考这篇文章bad.list-box{border-top-style:none;字体系列：aerif；字体大小：100%；行高：1.6；填充底部：2em；左填充：1em；右填充：1em；填充顶部：0；}good.list-box{border-top:0;字体：100%/1.6aerif；填充：01em2em；}12。去掉小数点后的0badfont-size:0.8em;goodfont-size:.8em;13。十六进制颜色代码缩写，尽量使用小写badcolor:#eebbcc;goodcolor:#ebc;它可以多次使用，但类选择器可以重复使用。另外，id的优先级高于class，所以id应该按需使用，不要被滥用。15.你可以给选择器添加状态前缀bad.withdrawal{background-color:#ccc;}good.is-withdrawal{背景颜色：#ccc;}16.命名项目时，使用my_project_name17这个方法。媒体查询规则与其相关规则接近，不要将它们放在一起形成独立的样式详情请参考本文18。更详细的css编写规范请参考本文1和本文219。有关问题写scss需要注意的，请参考这篇文章2.命名参考表网页最外层：wrapper（页面外围控制整体布局宽度）头部：header主要内容（中间）：main左布局:main-left右侧布局:main-right导航栏:nav网页中部Mainbody:contentBottom:footerMenu:menu页面结构#wrapper页面外围控制整体布局宽度#container或#content容器，用于最外层#head、#header页面头部#foot、#footer页面页脚部分#sidebarsidebar#columncolumn#left,#right,#center左右中心导航#nav导航#miannav主导航#subnav子导航#topnav顶部导航#sidenar侧边导航#leftsidenav左导航#rightsidenav右导航#menu菜单#submenu子菜单#title标题#summary抽象特征#logosign#bannerad#loginlogin#loginbar登录栏#regsiterregister#searchsearch#shopribbon#titletitle#joinusjoin#statusstatus#btnbutton#sscroll#tabtab#listarticlelist#msgPrompt资讯#当前当前#tips提示#icon图标#note评论#guild指南#service服务#hot热点#news新闻#download下载#vote投票#partner伙伴#friendlink友情链接#copyright版权#searchInput搜索输入框#search-output搜索输出#search-results搜索结果#branding商标#siteinfo站点信息#siteinfoLegal法律声明#siteinfoCredits声誉#arrow箭头#sitemap站点地图#homepage首页首页#subpage二级页面子页面#toolbar工具栏#drop下拉#dropmenudrop-向下菜单需要使用类的名称。标签标签页。左边。Productreview.editor_reviewEditor'sreview.news_releaseLatestproduct.publisherManufacturer.screenshotThumbnail.faqsFAQ.keywordKeyword..blogBlog.forumForum3.css文件命名为global.cssglobal全局样式是全站通用的，对于Page样式基础，页面必须包含master.css样式e.css主要module.css模块产品页面应用，可复用模块剥离后，可与其他样式结合使用base.css基本共享layout.css布局，布局页面结构类型复杂，common类型经常使用，主要用于首页和产品页面。themes.css主题用于实现换肤功能。columns.csscolumnfont.csstext,fontforms.cssformmend.csspatch是基于以上样式的私有化。cssprintstyle.css私有独立页面使用的样式文件，页面必须包含4.css属性声明顺序详细的声明顺序可以参考这篇文章位置属性（position,top,right,z-index,display,float等）大小（width、height、padding、margin）文本系列（font、line-height、letter-spacing、color-text-align等）Background（背景、边框等）其他（动画、过渡等）坏.example{颜色：红色;z-指数：-1；背景色：#9e0；显示：内联块；字体大小：1.5em；}good.example{z-index:-1;:1.5em;红色;背景色：#9e0；}感谢这篇文章我参考了下面作者写的文章，在这里特别表示一下感谢。如果您在阅读我的文章时有任何疑问，可以参考以下链接：DIV+CSS规范命名百科全书合集CSS命名规则【豆瓣组】如何规范CSS的命名和书写？【知乎】团队规范文档【腾讯alloyteam前端团队】css编码规范【百度fex前端团队】nec规范【网易前端团队】精简高效的CSS命名指南/方法【张新旭】废话网页面重构系列[大象]
