10款前端必备的CSS工具 - 简书
下载简书移动应用
写了163710字，被489人关注，获得了1231个喜欢
10款前端必备的CSS工具
对于web开发来说，CSS是最有效的美化页面、设置页面布局的技术。但问题是，CSS是一种标记性语言，语法结构非常的松散、不严谨。WEB程序员会经常发现自己的或别人的CSS文件里有大量的冗余代码或错误或能够大量优化的地方。如果你经常使用静态编程语言(比如，Java，C语言)等，你会发现实用的IDE工具会给编程带来巨大的效率，像Eclipse这样的能够实时自动分析代码问题的集成开发环境就是一个典型的例子。那么，CSS程序员有没有这样的帮助工具呢？。下面将要介绍的10款工具都是一些在线的应用，你不需要将它们安装到自己的电脑上，只要能联网，你就可以使用它们。大部分的这些工具使用起来都非常的简单，但也有需要技巧的地方。如果你在使用它们的过程中有什么心得体验，请留在评论里分享给大家。CSS问题检查工具：
CSS Lint是一个开源的校验CSS文件质量的工具，最初是由 Nicholas C. Zakas和 Nicole Sullivan编写的，最初版本在Velocity会议上于2011年6月发布。CSS Lint的检测规则包括错误的和警告，当选择器或属性书写不正确、漏掉了大括号、多写了分号等时，会提示解析错误，解析错误优先提示。CSS代码分析统计工具：
Css Stats是一款在线CSS代码分析工具，输入网站CSS网址即可进行CSS代码分析。Css Stats是前端网页设计师分析网站CSS代码的利器，可以统计CSS代码里的规则、字体大小、宽度高度、颜色数等等。对于网页设计师而言分享网页CSS代码是必须要做的事情，统计网站设计里使用了多少种字体、多少种字体大小、多少种颜色、背景颜色有多少种，只有对CSS代码有一个详细的统计数字才能分析出来整个网站设计出来以后的效果。Css Stats还提供热门网站的CSS分析数据，例如谷歌、雅虎、Twitter、FaceBook、Tumblr等网站。CSS代码优化压缩工具：
CSS Shrinks 能够非常明显的压缩你的CSS体积大小。很多Web程序员编写的CSS代码里有大量的冗余语法，空白空间等，这款工具能在不影响你的CSS的正确性的情况下，优化CSS的语法，去除无用的空格和空行，显著的压缩CSS的提交，大量的减少带宽的浪费。CSS代码整理工具：
ProCSSor 除了提供基本优化CSS代码功能，还提供了大量的自定义选项。比如，让你设定CSS规则，CSS属性，CSS语法的优化选项。它还提供了对新型CSS3属性、规则中各种浏览器里的不兼容替代方案。
Codrops CSS 参考内容丰富而全面，并且界面清爽直接，你可以使用这个工具掌握CSS里最重要而全面的知识。它的CSS知识库分成了数个类别，包括伪类，属性，函数，数据类型，概念，规则等。CSS3浏览器兼容支持情况查询工具：
“Can I Use”在这里你能找到所有web新特性在各个品牌浏览器以及各品牌浏览器不同版本的兼容性，当你知道你针对的用户都在使用什么浏览器时，这写table将对你建设网站有很大帮助。打开，该网站首页将所有HTML5、CSS3等web新特性罗列出来，如果你想查看某个特性在不同浏览器种的兼容情况，点击一下就可以。比如，看一下@font-face Web fonts在各个浏览器中的兼容性，点击CSS区域中的第一项，会看到一个表格，列出所有浏览器的版本，用不同颜色代表每个浏览器对@font face Web fonts的支持，被标识为红色的代表不支持，浅绿色代表部分支持。图中列出的浏览器还包括一些手机平板设备浏览器，例如Android系统浏览器。如此全面，设计网站时，可以根据网站针对的用户有选择的使用CSS和Javascript的高级特性，提高用户体验。检查你的代码是否符合CSS标准：
这个工具是用来检查你的CSS语法是否正确，是否符合W3C CSS标准。我们知道从最早的IE开始，各种浏览器都实现了一些自己的方言，这些方言中在各种浏览器里互不相通。但我们开发网页时，必须最大限度的考虑各种浏览器的兼容性，最好的方法是遵守W3C的CSS标准规范。W3C CSS Validation Service就是用来校验你的css中的问题，它会提醒你那些语法，哪些属性，那些规则是有问题的。
Codepad.org是一个很有意思的网站，它的主页很简单，左边是可以编译并执行的程序语言，右边则是让你输入程序的输入框，输入框的下面是一个“Run Code”的复选钮和一个“Submit”的提交按钮。其操作起来也非常简单，先选中你要编译并运行的程序语言，然后在输入框中粘贴或输入程序的原代码，然后，点击提交，你就可以看么你程序编译出错的提示，或是执行的结果。也许，你会觉得很无聊天，但我觉得这在某些时候会非常有用，尤其是你找不到编译器而又想验证一段代码的时候，这种时候还是比较多的。特别是我们很难有一台可以运行所有语言的电脑，如果有的话，那一定是你自己的个人电脑，当你不使用你自己的电脑时，你就会着急了。而且，我觉得这项服务非常地有意思，因为，这样一来，你甚至可以在你的手机上写任何语言的程序了。目前这个网站支持下面这样语言——C，C++，D，Haskell，Lua，OCaml，PHP，Perl，Plain Text，Python，Ruby，Scheme，Tcl。CSS动画生成工具：
这是一款使用CSS Gradient和CSS Animation技术实现的动态背景生成工具。工具非常易用，轻松地点击几下鼠标，一个现代感十足的渐变动态背景代码就生成了。它可以让CSS渐变背景平滑地移动，我们可以设置移动的角度，移动的速度，渐变的角度。支持所有现代浏览器以及 ie 10+。非常适合做网页开屏背景。Web颜色工具：
故名思议，这个工具是用来方便Web设计者查找颜色的，它提供了各种颜色的视觉效果，对于的颜色的英文名称，RGB值，16进制值，使用起来非常的方便。/10-css-tools
如果觉得我的文章对您有用，请随意打赏。您的支持将鼓励我继续创作！
打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮
被以下专题收入，发现更多相似内容：
记录、分享前端知识，让前端飞一会
· 4754人关注
心情不好的时候问自己 ：
我为何这么屌
心情好的时候问自己 ： 为什么比我屌的这么多
· 3734人关注
新奇好看的web前端
· 823人关注
如果觉得我的文章对您有用，请随意打赏。您的支持将鼓励我继续创作！
选择支付方式：瞅瞅Facebook是怎么保证CSS代码质量的_菜鸟教程-爱微帮
&& &&& 瞅瞅Facebook是怎么保证CSS代码…
在Facebook里，上千名工程师工作在不同的产品线上，为全世界的用户提供可靠优质的服务，而我们在代码质量管理方面也面临着独一无二的挑战。不仅仅是因为我们面对的是一个庞大的代码基库，还有日渐增加的各种各样的特性，有时候如果你想去重构提高某一个模块，往往会影响到其他很多模块。具体在CSS而言，我们需要处理上千份不停变化的CSS文件。之前我们着力于通过Code Review、代码样式规范以及重构等手段协同工作，而保障代码质量，但是还是会有很多的错误悄悄从眼皮底下溜走，被提交进入到代码库里。我们一直用自建的CSS Linter来检测基本的代码错误与保证一致的编码风格，尽管它基本上已经满足了我们的目标，但还是存在很多的问题，因此我也想在这篇文章里对如何保障CSS的代码质量进行一些讨论。Regex is not Enough:之前用的是正则匹配，不咋的啊老的Linter主要是基于很多个正则表达式对CSS中的语法进行提取，大概是这个样子的：preg_match_all( // This pattern matches [attr] selectors with no preceding selector.&&&&&&'/\/\*.*?\*\/|\{[^}]*\}|\s(\[[^\]]+\])/s', $data,&&
$matches,&&
PREG_SET_ORDER | PREG_OFFSET_CAPTURE); foreach ($matches as $match) {&& if (isset($match[1])) {&&&& raiseError(...);&& }基本上一个检测规则就需要添加一个专门的匹配规则，非常不好维护，在性能上也有很大的问题。对于每个规则俺们都需要遍历整个文件，性能差得很。Abstract Syntax Tree受够了正则表达式，我们想搞一个更好用的也是更细致的CSS解释器。CSS本身也是一门语言，老把它当做纯文本文件处理也不好，因此我们打算用AST，即抽象语法树的方式构建一个解析器。这种新的处理方式在性能上面有个很不错的提升，譬如我们的代码库中有这么一段CSS代码：{&&display: none:&&background-color: #8B1D3;&&padding: 10px,10px,0,0;&&opacity: 1.0f;}眼神好的估计才能看出这个代码片段中存在的问题，譬如某个属性名错了、十六进制的颜色代码写错的，分隔符写错了等等。浏览器才不会主动给你报错呢，这样开发者自己也就很难找到错误了。在具体实现上，我们发现PostCSS 是个不错的工具，因此我们选择了Stylelint作为我们新的Linter工具，它是基于PostCSS构建的，非常的灵活，社区也不错。就像JavaScript中的Esprima以及ESLint一样，Stylelint提供了对于完整的AST的访问方式，能够让你根据不同的情况更快速简单的访问具体的代码节点，譬如现在我们的检测规则写成了这个样子：root.walkDecls(node =& {&&if (node.prop === 'text-transform' && node.value === 'uppercase') {&&&&report({&&&&&&...&&&&});&&}});我们也可以传入一些基本的函数，譬如linear-gradient，就像这个样子：// disallow things like linear-gradient(top, blue, green) w. incorrect first valueroot.walkDecls(node =& {&&const parsedValue = styleParser(node.value);&&parsedValue.walk(valueNode =& {&&&&if (valueNode.type === 'function' && valueNode.value === 'linear-gradient') {&&&&&&const firstValueInGradient = styleParser.stringify(valueNode.nodes[0]);&&&&&&if (disallowedFirstValuesInGradient.indexOf(firstValueInGradient) & -1) {&&&&&&&&report({&&&&&&&&&&...&&&&&&&&});&&&&&&}&&&&}&&});});这样子写出来的检测规则可读性更好，也更好去理解与维护，并且这种方式无论是在怎样的CSS格式化的情况下，以及不管规则和声明放在哪边，都能正常地工作。Custom rules:自定义规则我们默认使用了一些Stylelint内置的规则，譬如declaration-no-important,selector-no-universal, 以及 selector-class-pattern。如何添加自定义规则的方法可以参考built-in plugin mechanism，而我们使用的譬如：slow-css-properties 来告警一些性能较差的属性，譬如opacity或者box-shadowfilters-with-svg-files 来告警Edge中不支持SVG的过滤use-variables来告警那些可以被内置的常量替换的一些变量common-properties-whitelist 来检测是否有些误写的其实不存在的属性mobile-flexbox 来检测一些不被老版本手机浏览器支持的属性text-transform-uppercase 来告警 “text-transform: uppercase”，这个在某些语言表现的不友好我们也贡献了部分规则 以及 ad插件itions 给Stylelint。Automatic replacement:自动替换我们检测过程中有一个重要的工作就是自动格式化，Linter会在发现某些问题的时候问你是否需要根据规则进行替换，这个功能会节约你大量的手动修改校正的时间。一般来说，我们提交代码之前都会审视下Linter报出的错误，然后去修复这些错误。可惜的是Stylelint并没有内嵌的自动格式化与修复机制，因此我们重写了部分的Stylelint的规则来增加一个自动替换与修复的功能。Test all the things我们老的Linter还有个问题就是没有单元测试，这点就好像代码上线前不进行单元测试一样不靠谱。我们面对的可能是任意格式的处理文本，因此我们也要保证我们的检测规则能够适用于真实有效的环境，这里我们是选择了Jest这个测试框架，Stylelint对它的支持挺好的，然后大概一个单元测试是这个样子：test.ok('div { background-image: linear-gradient( 0deg, blue, green 40%, red ); }', &&'linear gradient with valid syntax');test.notOk('a { background: linear-gradient(top, blue, green); }', &&message, &&&&'linear-gradient with invalid syntax');What‘s next换一个靠谱的CSS Linter工具只是保证高质量的CSS的代码的第一步，我们还打算添加很多自定义的检测规则来捕获一些常见的错误，保证使用规定的最佳实践以及统一代码约定规范。我们已经在JavaScript的校验中进行了这一工作。另外对于React社区中存在的CSS-in-JS这种写法，对于CSS Linter也是个不小的挑战，现在的大部分的Linter都是着眼于处理传统的CSS文件，以后会添加对于JSX的处理规范吧。作者：王下邀月熊链接：/wxyyxc1992/web-frontend-practice-handbook/blob/master/css/advanced/bestpractices/codestyle/improving-css-quality-at-facebook-and-beyond.md点击阅读原文查看历史文章
点击展开全文
悄悄告诉你
更多同类文章
还可知道有多少人阅读过此篇文章哦
阅读原文和更多同类文章
可微信扫描右侧二维码关注后
还可知道有多少人阅读过此篇文章哦
学的不仅是技术，更是梦想！
您的【关注和订阅】是作者不断前行的动力
本站文章来自网友的提交收录，如需删除可进入
删除，或发送邮件到 bang＠ 联系我们，
(C)2014&&版权所有&&&|&&&
京ICP备号-2&&&&京公网安备34欢迎您来到网页代码站！
如果您关闭了浏览器的javascript，可能导致页面部分功能无法显示，请开启javascript以便正常浏览本网页。网页代码站()谢谢您的支持！
您的当前位置： >>
>> CSS实现FaceBook风格的按钮菜单
CSS实现FaceBook风格的按钮菜单
分类：&&&时间：&&&点击：&&&关键词：|||||
&title&CSS实现FaceBook风格的按钮菜单_网页代码站()&/title&
font-family: &lucida grande&, tahoma, verdana, arial, sans-
font-weight:
font-size:12
margin:100
.button_outside_border_green{
border:solid #3b6e22 1
border-bottom:solid #2c5115 1
.button_inside_border_green{
padding:6px 0 6px 0;
background-color:#68a64c;
border-top:solid #98c286 1
text-align:
div.button_inside_border_green:active{
background-color:#609946;
.button_outside_border_blue{
border:solid #29447e 1
border-bottom:solid #1a356e 1
.button_inside_border_blue{
padding:6px 0 6px 0;
background-color:#5c75a9;
border-top:solid #8a9cc2 1
text-align:
div.button_inside_border_blue:active{
background-color:#4f6aa3;
&h1&FaceBook style buttons&/h1&
&div class=&button_outside_border_green&&
&div class=&button_inside_border_green&&Sign Up&/div&
&div class=&button_outside_border_blue&&
&div class=&button_inside_border_blue&&Login&/div&
&p&&a href=&&&网页代码站&/a& - 最专业的网页代码下载网站 - 致力为中国站长提供有质量的网页代码！&/p&
一款使用纯CSS代码实现的仿FaceBook网站风格的按钮效果，没有使用任何的图片，兼容全系列浏览器，如果对两款按钮的颜色不满意的话，那就自己重新设置你喜欢的颜色，不过要注意按钮边角各颜色值的处理，这一点也是挺关键的。
一、如果您使用的浏览器版本为IE6.0、360浏览器V3.0.8.1版本或者IE的更低版本浏览本页面，建议您升级浏览器至IE7以上，上面的“运行”按钮可能不能用，但您可按以下方式查看。运行代码方式：1、点击“复制”按钮；2、在桌面建立一个txt文档；3、粘贴复制的代码；4、最后把txt的扩展名改为“htm”或“html”；5、完成，打开即可看到效果。二、如果您使用FireFox或者非IE浏览器，建议您使用IE7以上版本。上面的“复制”按钮失效，请您“全选”，以普通方式复制！三、某些代码因需加载完Jquery等之类比较大的JS文件，如果您看不到效果，请您刷新页面！四、某些代码不能完全兼容各浏览器，还请您再次修改才能使用！给您带来的不便！尽请谅解！谢谢您的支持！
Powered by (网页即"web" + 代码即"dm" + "cn" = ) | 最专业的代码下载网站 - 致力为中国站长提供高质量的代码！Facebook提高性能的流水线技术_图文_百度文库
两大类热门资源免费畅读
续费一年阅读会员，立省24元！
Facebook提高性能的流水线技术
上传于||文档简介
&&F​a​c​e​b​o​o​k​提​高​性​能​的​流​水​线​技​术
阅读已结束，如果下载本文需要使用1下载券
想免费下载本文？
定制HR最喜欢的简历
下载文档到电脑，查找使用更方便
还剩2页未读，继续阅读
定制HR最喜欢的简历
你可能喜欢