PostCSS学习指南(一)

关于我最近学习PostCSS的一些相关心得和总结

(推荐访问github上面的Markdown排版的介绍PostCSS学习指南(一))

PostCSS介绍

PostCSS是一个利用JS插件来对CSS进行转换的工具,这些插件非常强大,强大到无所不能。其中,Autoprefixer就是众多PostCSS插件中最流行的一个。

截至目前(2017年7月)PostCSS已经有超过200个插件,你可以插件列表查找有没有你所需要的插件。如果你想自己写个插件,据说这是一个不错的主意,而且非常简单,你可以试着搞点事

看到这里,你可能没有发现它的强大之处,甚至我自己都没有被我翻译的这段官方文字所打动。~~因为没(wǒ)有(yě)对(bù)比(tài)就(huì)没(yòng)有(zhè)伤(wán)害(yì)。~~好了,是时候启动装逼模式了。

维基百科,阿里巴巴,谷歌,Wordpress,Twitter等网站均有使用,大佬们都在用你有什么理由不跟上步伐。

再来看看这张PostCSS下载数量的npm-stat统计表(数据证明一切):

PostCSS下载数量

学习PostCSS之前需要了解一些事情:

  1. PostCSS插件的处理方式类似那些CSS预处理器,而非预处理器和后处理器(PostCSS is Not a *Pre-*processor and Not a *Post-*processor either
  2. PostCSS is Not “Future Syntax”(不是新式语法?不知道怎么翻译)
  3. PostCSS本身并非整理或优化CSS的工具
  4. PostCSS可以完成很多意想不到的事情,例如用postcss-rtl恶搞一下:yum:

那么它还有一些特性,例如创建了一个插件功能极强的生态系统,具有模块化需要什么用什么(precss就是一个集成了类似SASS的包),相比其他的CSS预处理器它的优势主要体现在以下几个方面:

  1. 拥有极高的处理性能(3倍以上的处理速度
  2. 你既可以写正常的CSS,也可以结合LESS或者SASS一起编写
  3. 对Source Map支持更好
  4. 他的插件真的太多太强大太便利了

其他对比SASS和LESS的区别在于他们内置了大量的方法,而也许你只需要用到几个变量而已,大材小用。而PostCSS则可制定个人需求的一套解决方案(仅安装需要的插件)。这也就是他高性能的主要原因。几乎SASS和LESS有的功能全都有!

总之好处太多了。这里就不一一列举了。迫不及待的你已经等不及安装使用了吧。

继续阅读“PostCSS学习指南(一)”

Sublime Text 3 中文优化版更新下载了(最后更新2014.9)

最近官网又更新,外加上手头前阵子装了好多插件测试,感觉sublime有点不稳定,于是下载了最新版升级了.并重新根据个人需要安装好插件和扩展包,打包了一份原版的64位的sublime text 3,因为是已经激活了(朋友买的正版),所以就不公开下载了,如果有需要请发邮件我:D

正巧也找到了一个的sublime text 3 3065汉化版,感觉还是不错的.不过如果不常用到GBK编码的话,建议还是用原版了.毕竟汉化版不是我做的,也不过就分享下网络上制作的这个版本:

Sublime Text(代码编辑器) v3.3065 中文破解版
Sublime Text v3.3065版本制作说明:
1.基于 Sublime Text 3 官方版进行修改汉化;
2.软件已默认注册且已去除自动检测升级提示;
3.调整字体大小为 11px 以适合大众使用习惯;
4.深度整合GBK编码已能够完美支持GBK文件;
5.默认安装了Emmet (Zen Coding)插件;
6.增加了配色非常舒服的Theme-Nil主题;
7.修改多处细节和配置文件使其更人性化;

Win7 用户请使用“Win7”文件夹中的“SublimeText.exe”替换“SublimeText2”目录中的同名文件,即可正常运行。

以上内容摘自Sublime Text(代码编辑器) v3.3065 中文破解版,压缩包内包含了X86和X64两个版本安装包,不过可能带有广告,如有需要可以测试一下~
最后更新:2014.09


前阵子还在研究st2的用法,没想到这么快3的汉化版都出来了.正巧看到,才与大家分享.

Sublime Text 3
Sublime Text 3截图

下载页面: Sublime Text3 Buld 3059 简体中文优化版

继续阅读“Sublime Text 3 中文优化版更新下载了(最后更新2014.9)”

谷歌HTML/CSS书写规范总结一(Google HTML/CSS Style Guide)

英文水平尚可或者没心情看我写的的朋友请查看谷歌原文档:Google HTML/CSS Style Guide

那么以下是我简要的总结(因为有点长分几篇发):

  1. 可以省略掉所有的关于附加的文档,图片等文件,甚至是CSS里面的的链接地址中存在的的http:https:
  2. 关于代码缩进问题,都不要使用tab进行缩进,全部使用2个空格键进行缩进
  3. 所有的HTML元素名称,属性,属性值(除了text/CDATA),CSS选择器,属性,属性值全部都用小写,简单的说就是基本上不用大写就行了
  4. 不要留多余的空格,在代码末尾,就算是自动生成的
  5. 强烈建议使用UTF-8编码进行页面制作.通过在模板内添加<meta charset=”utf-8″>,想了解更多请查看Handling character encodings in HTML and CSS
  6. 养成写注释的好习惯,当然每种计算机语言都是这样的 继续阅读“谷歌HTML/CSS书写规范总结一(Google HTML/CSS Style Guide)”

Bing官方搜索优化指南:Bing SEO Guidelines

最近研究SEO,虽然百度对本站的好感度不高,不过也没办法,顺其自然,当然bing什么的更加差劲了,不过BING我感觉的确还是有很长的路要走.至少我的手机上用BING搜索总是不很理想.正巧在站长之家看到这样一篇关于BING的搜索引擎优化的文章,现同大家分享下.

在大多数时候,我们都是以百度和Google作为搜索引擎优化对象的,根据bing官方的一篇博文”Bing Webmaster Guidelines“,我们可以知道,不管是针对哪一种搜索引擎,有90%以上的SEO优化操作过程都是一样的,而剩下的10%则是搜索引擎比较喜欢参考哪些网站资源而已了。

BING的搜索引擎优化
BING的搜索引擎优化

继续阅读“Bing官方搜索优化指南:Bing SEO Guidelines”

WordPress 3.1 Beta 1 发布

前天,wordpress官方网站新闻更新了说wp 3.1beta1版本发布了,比较激动,去看了看,,,以下是我简单的原文翻译:

又到了一个开发周期的发布时刻了,此时所有基本功能已经完成,也消除了很多BUG.请喜欢追新的朋友尝试一下这个新版本吧!当然,现在这个版本还在开发阶段,我们不建议你将它作为目前正在使用的网站上,最好是仅仅用来测试,当然如果你发现了问题,及时通知我们,当然如果有可能的话,未尝不可帮我们解决这个问题,我们将很高兴!

如果一切都很顺利的话,wordpress 3.1将于年底发布,当然实际情况将取决于这个测试版的测试结果了,你帮我们查到的问题越快越多,我们也将更快的推出稳定的版本.

如果你想成为测试人员,你需要了解有关报告错误的知识(<<如何提交错误(原文:how to report bugs)>>)一下将介绍这次更新带来的变化:

  1. 发布文章的格式(详见:#14746)
  2. 主题搜索 (详见:#14936)
  3. 内部链接 (详见:#11420)
  4. 管理工具条(详见:#14772)
  5. 交互式管理(详见:#14579)
  6. 更新TinyMCE(即编辑器,详见:#12574)
  7. 多分类查询(详见:#12891)
  8. 自定义文章索引页(详见:#13818)
  9. CSS清除管理(详见:#14770)
  10. 用户管理(详见:#14696)
  11. 网络管理(详见:#14435)
  12. 更新密码重置方式(Password Reset Redux,详见:#5919)

当然,还有一些待验证的问题,还没有完全的完成,在这个测试版中没有提到.它会将在3.1普及使用之前解决的….(后面一大串,我就不详述了,大致的更新内容简单介绍到这里,也希望,WP能更好的完善部分功能,其实我还是比较期待内置编辑器的变化~)

时间不早了,睡觉了~

测试版本下载地址:Download WordPress 3.1 Beta 1

原文来自:http://wordpress.org/news/2010/11/wordpress-3-1-beta-1/