@importurl("css/master.css");https://csswizardry.com/2013/...https://css-tricks.com/bem-101/https://www.smashingmagazine....https://hackhands。com/70-Expe...重置您的CSS样式以规范化http://necolas.github.io/norm...重置http://html5reset.org/http://www.zhangxinxu.com/wor...使用CSS常量来加快开发速度。/*#深灰色（文本）：#333333#深蓝色（标题、链接）#000066#中蓝色（标题）#333399#浅蓝色（顶部导航）#CCCCFF#中灰色：#666666*/工作流程：调试*{border:1pxsolid#f00;}使用主样式表/*master.css*/@importurl("reset.css");@importurl("global.css");@importurl("structure.css");@importurl("css/master.css");格式1.推荐使用破折号而不是驼峰大小写作为类名。如果你使用BEM，你也可以使用下划线（参见下面的OOCSS和BEM）。2.不要使用ID选择器。3.当一个规则声明中应用多个选择器时，每个选择器单独占一行。4.在规则声明的左大括号{前添加一个空格。5.属性的冒号:后面加一个空格，前面没有空格。6.规则声明的右花括号}在一行上。7.规则声明由空行分隔。.avatar{border-radius:50%;border:2pxsolidwhite;}.one,.selector,.per-line{//...}注意1.建议使用行注释（在Sass中是//）而不是块注释。2.建议评论占一行。避免行尾注释。3.写一段详细的代码说明，不要自己注释，比如：为什么要用z-index兼容性处理4.使用flags。“将样式表分成特定的部分：全局样式——（文本、段落、列表等）、标题、页面结构、标题、文本样式、导航、表单、评论、附件。出于以下原因，鼓励使用OOCSS和BEMOOCSS和BEM的一些组合：可以帮助我们理清CSS和HTML之间清晰而严谨的关系。可以帮助我们创建可重用、易于组装的组件。可以减少嵌套和降低特异性。可以帮助我们创建可扩展的样式表。OOCSS，或“面向对象的CSS”，是一种编写CSS的方式，它鼓励您将样式表视为“对象”的集合：创建可扩展的可重用、可重复的代码片段，您可以在整个站点中多次使用这些代码片段。BEM，或“Block-Element-Modifier”，是HTML和CSS类名的命名约定。BEM最初是由Yandex提出的，知道他们有庞大的代码库和可扩展性，BEM就是为此而生的，并且可以作为一套参考指南遵循OOCSS的行。尽量不要使用ID选择器！！！在CSS中，虽然可以通过ID选择元素，但这种方法通常被认为是一个糟糕的教训。ID选择器给您的规则声明不必要的高优先级，并且ID选择器不可重用。JavaScript钩子避免在CSS和JavaScript中绑定相同的类。否则，在重构时，开发人员通常要么浪费时间检查每个类以进行更改，要么因为担心破坏功能而不进行更改。我们建议在为特定JavaScript创建类名时添加.js-前缀：RequesttoBookSass属性声明顺序在前除@include和嵌套选择器之外的声明。紧接着是@include，它可以让整个选择器更具可读性。嵌套选择器不要让嵌套选择器的深度超过3层！如果您需要使用嵌套选择器，请将它们放在最后，在规则声明和嵌套选择器之间以及相邻的嵌套选择器之间留有空格。嵌套选择器中的内容也遵循上述准则。.btn{背景：绿色；字体粗细：粗体；@include过渡（背景缓动0.5秒）；.icon{margin-right:10px;}}variables变量名应该使用破折号（例如$my-variable）而不是camelCased和snake_cased风格。对于只在当前文件中使用的变量，可以在变量名前加上下划线前缀（例如$_my-variable）css分类根据css的性质和用途，我们可以将css文件分为“publicstyle””和“特殊风格”。,"SkinStyle",并以此顺序引用。那么它们是什么？公共风格是最重要的部分。对于比较小的项目，我们只引入一个css。这个css的样式是public样式，一般包括：“重置标??签并设置默认值”（消除不同浏览器之间的差异），“统一调用背景图片和清除浮动或者其他需要的长样式统一处理（这样就不用各自单独处理了）”、“网站通用布局”、“常用模块及其扩展”、“组件及其扩展”、“功能风格”、“皮肤风格”.后面会详细介绍。特殊风格就是在一个维护率高的栏目或者与整个网站差异较大的页面中独立引入这样一种特殊的风格，方便我们维护。皮肤类型样式是指产品需要皮肤功能，所以我们需要把颜色、背景等提取出来放在这里，方便管理。css文件分为公共样式、特殊样式和皮肤样式，那么我们在css文件内部如何分类呢？（这部分是重点）重置和默认css代码。这是为了消除默认样式和浏览器的差异，设置一些标签的初始样式，减少后期的重复劳动。可以根据自己的网站要求进行设置。这部分代码放在css的顶部。统一处理的css代码。这里可以统一调用背景图和清除浮动（指的是原文中通用性很强的布局、模块、清空）,主栏,Sidebars,Tails等常用的！模块（module）：即语义上可重用的更大的整体。如导航、登录、注册、列表、评论、搜索等常用！Component（单元）：通常是一个不可分割的比较小的个体，在各个模块中复用，比如按钮，输入框，loading，图表等，常用！作用：为了方便一些常用的样式的使用，我们把这些使用率高的样式剥离出来，按需使用。通常，这些选择器都有固定的样式表达式，比如清除浮动。不常用，不滥用！skin：对于换肤网站，需要使用它来提取皮肤类型样式。非换皮网站不能滥用，不常用。State（状态）：即一些状态类样式。不常使用。CSS代码格式1.选择器、属性和值都是小写的。这一点很关键：根据xhtml的规范，所有的标签属性和值都必须是小写的，而且我们知道xhtml是比较标准的，所以最好遵循，所以选择器必须是非常有必要的小写。这种情况下，我们不能用驼峰式来写类名，比如class="u-leftArrow"其实不规范，不如写成class="u-left_arrow"，也能表达同样的意思。2.在一行中写一个选择器定义。优点：易于查找和阅读选择器，易于插入新的选择器和编辑，易于识别模块等。更重要的是，可以去除多余的空格，使代码紧凑，减少换行。试想一下，如果每一行只有一个属性名和属性值，那么对于一个大项目来说，选择器的查找和读取会很困难，而如果一个选择器写在一行中，可能会缩短到1/6到1/10，还是很客观的。3.最后一个值也以分号结尾。其实花括号结束前的值可以省略分号，但是这样做会给修改、添加和维护工作带来不必要的错误和麻烦。比如在末尾添加一个属性，如果之前没有在末尾添加分号，那么就必须在新添加的属性前添加一个分号，否则会报错4.省略带a的单位值为0的好处：可以省去不必要的同时，为了阅读方便，我们将0px、0em、0%等简称为05。用16进制表示颜色值，其中的字母大写和尽量简写。除非你需要透明度和使用rgba，否则使用#FFFFFF并尽量缩写它，例如#FFF。使用大写形式是因为可读性更好，有利于压缩，缩写是为了减少不必要的字节。6.按照属性的重要性顺序来写。 就按照横向的顺序，就是先写定位和布局属性，写自己的属性比如写字框模型，最后写文字和装饰属性。另外，如果属性之间有关联，不要把height和line-height分开写。我们尽量不分开写。7.私人第一，标准最后。 先写浏览器私有标志的属性，再写W3C标准的属性。因为私有属性，就意味着浏览器本身没有标准化，标准的属性是不能用的。如果有一天浏览器的属性标准化了，就意味着可以使用标准属性，而如果我们先写W3C标准属性，最后写私有属性，可能会导致私有属性覆盖标准属性。所以，privatefirst，standardlast的写法是考虑到了以后可能出现的问题。8.选择器级别！important>内联样式style>id选择器>类、伪类和属性选择器>标签选择器和伪元素选择器9.css里面的顺序 我觉得，对于一个网页，我们在写css的时候，可以分分成几个部分来写，比如header部分的css代码，main部分的css代码，各部分之间用空格隔开并给出相应的注释，更有利于我们的阅读和后期维护10.优化scheme：对于可以缩写的值，我们尽量使用缩写形式，这有助于减小css文件的大小，增加可读性和可维护性。并且最好尽量减少没有实际作用的冗余属性。有时我们将一系列具有相同定义或大部分相同属性值的选择器组合在一起（逗号法）来统一定义，这可以为您节省大量的字节和宝贵的时间。10.类选择器的命名建议 前面说了，在给className命名的时候，应该根据它的作用和作用来命名，而不是使用没有语义或者根据颜色、左右空格位置的词。常用名称 1. 对于布局，使用.g-作为前缀，通常有以下推荐的写法。 head:headerorhead body:body tail:footerorfoot maincolumn:main sidebar:side boxcontainer:wraporbox mainColumnsub-container:mainc sidecolumn子容器：sidec 2.对于modules，即.m-作为前缀。以.u-为前缀的组件，通常有以下推荐的写法。 Nav:nav Subnav:subnav Menu:menu Tab:tab Titlearea:headortitle Contentarea:bodyorcontent List:list 表格：table 表格：form 排名：top 热门：hot 登入：登入 Logo：logo 广告：adervertise Search：search Slideshow:slide 帮助：help 新闻：news 下载：下载 注册：registerorregist 投票：vote 版权所有：copyright 结果：result button:button input:input 3.对于函数，以.f-为前缀，通常推荐如下： 溢出隐藏：溢出隐藏 4。对于颜色，前缀为.s-，通常推荐如下： 字体颜色：fontcolor 背景：background 背景颜色：backgroundcolor 背景图片：backgroundimage 背景位置：backgroundposition 边框颜色：bordercolor 5.status，以.z-为前缀，通常推荐如下：:hide 打开：open 关闭：close 错误：error 不可用：disabled参考文章https://www.cnblogs。com/zhzh...
