960栅格系统快速使用指南
现代浏览器中ctrl+u 用于切换是否显示栅格 960的demo分为三个部分，分别展示了几种class的用法： top部分 分为两竖条，24格系统中一条以30开始，40递增 container_24说明将960px分为24栏竖条。实际使用950px，左右两边还有5px的白边 grid_xx说明占多少栏竖条 空白条10px css实现： .grid_xx{ display:inline;//防止ie …
标签分类：CSS
更好的模块文件组织
来自D2前端技术论坛中的ppt，可以在此查看 前端中静态文件与文件夹组织也有些讲究。可以结合wp的主题进行思考，其中CSS样式表不合并请求请求多，合并又太大，不好取舍。又比如js加载，如何让重要的控件可以先响应，像某些重要的按钮。 加载执行顺序方面，body需要等到head中的资源下载完成后才开始渲染，同时body中的资源需要等到之前的js执行完才会开始下载。js会等到其前面所有css下载完成后才 …
主题CSS样式表规划与编码规范
CSS写起来并不困难，主要麻烦其实在于CSS样式表的规划：怎么去安排规则出现的位置，何时需要分开写，何时将几个规则写在一起；哪些样式应该放在一块，哪些样式可以分开成多个样式表进行选择加载。只要一个Web项目需要维护，未来需要更新，样式表的规划问题就是个头疼的问题，而为WordPress设计主题就必须考虑这个问题。 这里可以先学习参考WordPress默认主题Twenty Eleven的样式表规划方 …
代码展示的相关知识
HTML中的code标签很具有迷惑性，其实其作用只是把显示的文本变为等宽字体而已，与代码展示息息相关的空格，换行符或tab字符的效果仍然会按照HTML默认的规则处理。如果要按照预定义的格式显示代码文本，实质应该使用pre标签，这个标签中的文字不但会以等宽字体显示而且会保留原有的空格，换行符或tab字符长度。当然不排除新的HTML5标准会对code做些符合其名称的优化，所以最佳实践是在pre中套用c …
Google的前端代码规范
下面是个人总结的Google的前端代码规范，包括来自Google的HTML/CSS规范以及JS规范。 其中HTML与CSS部分翻译可以参考：Google HTML/CSS Style Guide 谷歌代码风格指南 JS规范终于有小组全部进行翻译啦，请参考：Google Javascript代码规范 总规范： 忽略（Omit）协议：如 background: url(https://www.googl …