浅谈高流量网站css开发的学习

1、流程协作与快捷工具

作为一个项目的开始,我们必然要对我们的项目进行一些规划,所以我们会有一个流程协作的问题。在我现在有限的认知里,我觉得流程协作的好坏主要体现于两方面:

  • 一个是项目的流程,通常是:需求》策划》设计》前端》程序》测试》上线;
  • 另一个则是程序员之间的配合了。程序员之间的配合关键在于约定一份大家可以接受的xx规范,模块化分割和注释,以及借助一些版本控制工具(比如Git或SVN)的使用。

作为前端调试,经常更改代码是我们的特性,所以我们自然会想是否有一些自动化的或者一些比较高大上的方法来提高自己的效率。于是乎,koala和grunt/gulp这些自动化工具出现在了我们的视野。

koala是一款国人开发的可以直接上手的简单易用的图形编译软件,官方网站是:http://koala-app.com 支持Less、Sass、Compass、CoffeeScript。跨平台兼容windows、linux、mac。

相比于考拉,命令行操作的grunt/gulp则显得比较复杂,当然功能也强大的多。

做前端开发,如果有一款自己顺手的编辑器,那么敲起代码来就会非常的爽。常见的一些编辑器,比如:Editplus,vim、WebStorm、Aptana、Brackets、Sublime Text etc,不需要去纠结哪一款编辑器好,关键是自己熟悉了习惯了就好了。

我目前主要用的就是sublime text,主要用ST+emmet(+snippets)。

2、css性能与效率

1.所谓的格式指导标准:
http://google-styleguide.googlecode.com/svn/trunk/htmlcssguide.xml
(关键在于内部的约定俗成吧。简约,语义话。语言是写给机器读的,但是也写给人看的,因为往往也需要协作。)

2.权重与特殊性:!important、hack

css是有权重的。四种选择器:ID、class、 tag和通用符的渲染速度差不多就是从快到慢的。

一般情况下,优先级如下:

1
External style sheet(外部样式)< Internal style sheet(内部样式)< Inline style(内联样式)

选择器的优先权,确切的说应该是权重值,如:

  • 1、内联样式表的权值最高 1000
  • 2、ID选择器的权值为 100
  • 3、Class类选择器的权值为 10
  • 4、HTML标签选择器的权值为 1

早期的IE(其实现在可以不管了吧):一个style标记只有前31次@import指令有效应用,一个css文件只有前31次@import指令有效应用,一个CSS文件的大小不能超过288kb。

防御式css和脆弱的css

防止被简单的覆盖:加前缀、合理命名、多重组合、增加权重

注意了:css引擎查找样式表,对每条规则都按从右到左的顺序去匹配。(从上到下,从右到左)

3.框架与整合

个人因为工作时间不长,所以到目前为止其实还没有用过任何框架,很多框架也仅限于了解认识,并未实战。

重置(reset.css、normalize.css)和检测(http://caniuse.com、modernizr.js)

对于框架什么的,必然是有选择的选取,而不是盲目的照搬。

CSS的组织或者说布局方式,比如:OOCSS(面向对象的css)

4.性能及动态css

不推荐@import方式导入外部样式表

title之后,header之前关于SEO的考虑。还有对图片不能缺少alt的属性等。

css图片合并,比如sprit的合理使用,记住是合理而不是必须。

单位(px、em、%、rem等),理论上固定单位效率比相对单位高,因为像em、%等这样的单位浏览器还要执行计算和换算。

预编译工具的使用和图片压缩:less、sass,图片压缩(ie6png)。

PS:

其实可学习css的网站多了去了,网站链接里也整了有些个人感觉还不错的网站,有兴趣可以翻翻。

延伸阅读:

坚持原创分享,您的支持将鼓励我继续创作!