Web程序员必备的CSS工具
CSS问题检查工具：CSS Lint
CSS Lint是一个开源的校验CSS文件质量的工具，最初是由 Nicholas C. Zakas和 Nicole Sullivan编写的，最初版本在Velocity会议上于2011年6月发布。CSS Lint的检测规则包括错误的和警告，当选择器或属性书写不正确、漏掉了大括号、多写了分号等时，会提示解析错误，解析错误优先提示。
CSS代码分析统计工具：CSS Stats
Css Stats是一款在线CSS代码分析工具，输入网站CSS网址即可进行CSS代码分析。Css Stats是前端网页设计师分析网站CSS代码的利器，可以统计CSS代码里的规则、字体大小、宽度高度、颜色数等等。
对于网页设计师而言分享网页CSS代码是必须要做的事情，统计网站设计里使用了多少种字体、多少种字体大小、多少种颜色、背景颜色有多少种，只有对CSS代码有一个详细的统计数字才能分析出来整个网站设计出来以后的效果。Css Stats还提供热门网站的CSS分析数据，例如谷歌、雅虎、Twitter、FaceBook、Tumblr等网站。
CSS代码优化压缩工具：CSS Shrinks
CSS Shrinks 能够非常明显的压缩你的CSS体积大小。很多Web程序员编写的CSS代码里有大量的冗余语法，空白空间等，这款工具能在不影响你的CSS的正确性的情况下，优化CSS的语法，去除无用的空格和空行，显著的压缩CSS的提交，大量的减少带宽的浪费。
CSS代码整理工具：ProCSSor
ProCSSor 除了提供基本优化CSS代码功能，还提供了大量的自定义选项。比如，让你设定CSS规则，CSS属性，CSS语法的优化选项。它还提供了对新型CSS3属性、规则中各种浏览器里的不兼容替代方案。
Codrops CSS 语法参考
Codrops CSS 参考内容丰富而全面，并且界面清爽直接，你可以使用这个工具掌握CSS里最重要而全面的知识。它的CSS知识库分成了数个类别，包括伪类，属性，函数，数据类型，概念，规则等。
CSS3浏览器兼容支持情况查询工具：Can I Use
“Can I Use”在这里你能找到所有web新特性在各个品牌浏览器以及各品牌浏览器不同版本的兼容性，当你知道你针对的用户都在使用什么浏览器时，这写table将对你建设网站有很大帮助。打开caniuse.com，该网站首页将所有HTML5、CSS3等web新特性罗列出来，如果你想查看某个特性在不同浏览器种的兼容情况，点击一下就可以。比如，看一下@font-face Web fonts在各个浏览器中的兼容性，点击CSS区域中的第一项，会看到一个表格，列出所有浏览器的版本，用不同颜色代表每个浏览器对@font face Web fonts的支持，被标识为红色的代表不支持，浅绿色代表部分支持。图中列出的浏览器还包括一些手机平板设备浏览器，例如Android系统浏览器。如此全面，设计网站时，可以根据网站针对的用户有选择的使用CSS和Javascript的高级特性，提高用户体验。
检查你的代码是否符合CSS标准：W3C CSS Validation Service
这个工具是用来检查你的CSS语法是否正确，是否符合W3C CSS标准。我们知道从最早的IE开始，各种浏览器都实现了一些自己的方言，这些方言中在各种浏览器里互不相通。但我们开发网页时，必须最大限度的考虑各种浏览器的兼容性，最好的方法是遵守W3C的CSS标准规范。W3C CSS Validation Service就是用来校验你的css中的问题，它会提醒你那些语法，哪些属性，那些规则是有问题的。
CSS动画生成工具：Gradient Animator
这是一款使用CSS Gradient和CSS Animation技术实现的动态背景生成工具。工具非常易用，轻松地点击几下鼠标，一个现代感十足的渐变动态背景代码就生成了。它可以让CSS渐变背景平滑地移动，我们可以设置移动的角度，移动的速度，渐变的角度。支持所有现代浏览器以及 ie 10+。非常适合做网页开屏背景。
今天小编要跟大家分享的文章是关于Web前端开发规范之css规范。Web前端作为开发团队中不可或缺的一部分，需要按照相关规定进行合理编写(一部分不良习惯可能给自己和他人造成不必要的麻烦)。不同公司不同团队具有不同的规范和文档。下面是根据不同企业和团队的要求进行全面详细的整理结果。来和小编一起看一看css规范的原则吧！css规范
1、编码规范为utf-8。
2、协作开发及分工：i会根据各个模块，同时根据页面相似程序，事先写**体框架文件，分配给前端人员实现内部结构&表现&行为。共用css文件base.css由i书写，协作开发过程中，每个页面请务必都要引入，此文件包含reset及头部底部样式，此文件不可随意修改。
3、class与id的使用：id是唯一的并是父级的，class是可以重复的并是子级的，所以id仅使用在大的模块上，class可用在重复使用率高及子级中。id原则上都是由我分发框架文件时命名的，为JS预留钩子的除外。
4、为JS预留钩子的命名，请以js_起始，比如：js_hide，js_show。
5、class与id命名：大的框架命名比如header/footer/wrapper/left/right之类的在2中由i统一命名.其他样式名称由小写英文&数字&来组合命名，如i_comment，fontred，width200。避免使用中文拼音，尽量使用简易的单词组合。总之，命名要语义化，简明化
6、规避class与id命名(此条重要，若有不明白请及时与i沟通)：a)通过从属写法规避，示例见d。b)取父级元素id/class命名部分命名，示例见d。c)重复使用率高的命名，请以自己代号加下划线起始，比如i_clear。d)a，b两条，适用于在2中已建好框架的页面，如，要在2中已建好框架的页面代码中加入新的div元素，按a命名法则：...，样式写法：#mainnav.firstnav{.......}按b命名法则：...，样式写法：.main_firstnav{.......}
7、css属性书写顺序，建议遵循：布局定位属性-->自身属性-->文本属性-->其他属性.此条可根据自身习惯书写，但尽量保证同类属性写在一起.属性列举：布局定位属性主要包括：display&list-style&position(相应的top，right，bottom，left)&float&clear&visibility&overflow
自身属性主要包括：width&height&margin&padding&border&background。
文本属性主要包括：color&font&text-decoration&text-align&vertical-align&white-space&
其他&content。
8、书写代码前，提高样式重复使用率。
以上就是小编今天为大家分享的关于Web前端开发规范之css规范的文章，希望本篇文章能够对正在从事Web前端工作的小伙伴们有所帮助，想要了解更多Web前端知识记得关注北大青鸟Web培训官网，最后祝愿小伙伴们工作顺利，成为一名优秀的Web前端工程师。
