05.组织选择及声明
要一直一直的保持你的css有规则,有组织性。最好把你的选择符进行归类。
• reset styles • typography styles • layout styles (header, content, footer, etc.) • module or widget styles • etc.
然后,在每一个组里面,通过dom层组织选择符。
• any parent styles (containing elements, working outside-in) • block-level element styles (paragraphs, lists, etc.) • inline element styles (links, abbreviations, etc.) • etc.
其次在这里面,根据元素的类型工作:
• paragraphs • blockquotes • addresses • lists • forms • tables • etc.
最后,把css的声明也按上述进行归类。
• positioning (with coordinates) styles • float/clear styles • display/visibility styles • spacing (margin, padding, border) styles • dimensions (width, height) styles • typography-related (line-height, color, etc.) styles • miscellaneous (list-style, cursors, etc.) styles
有些人喜欢按照字母顺序来组织。这对我没有任何用处,但是可能会对你有帮助。不管你选择什么样的方法,一定要坚持下去。
06.创建一个架构。
当你开始创建css样式表的时候,如果你发现你总是不断重复做同一件事情,那就考虑建一个库或者框架结构吧。一个框架就像是网站骨架一样,而且这回节省你建立网站的时间。你可能会在你的框架中发现以下比较典型的样式表:
• screen.css - A screen CSS file can either have all your styles you want to be used for on screen, and/or can import additional styles, such as the following: o reset.css - A reset CSS file can be used to “reset” all the default browser styling, which can help make it easier to achieve cross-browser compatibility. o typography.css - A typography CSS file can define your typefaces, sizes, leading, kerning, and possibly even color. o grid.css - A grid CSS file can have your layout structure (and act as the wireframe of your site, by defining the basic header, footer, and column set up). • print.css - A print CSS file would include your styles you want to be used when the page is printed.
构建框架其中一个范例就是,由0olav bjørkøy整理的框架蓝图(另外作者还包括杰夫豆和埃里克迈耶)。另外一个很流行的框架就是雅虎的用户界面库。很多开发者都感到这个预建立的框架包含臃肿的标记和css,而且也包含着直接的类名称。
注意:当我还在起草这篇文章的时候,Jeff Croft已经发布了怎能不爱上css框架的书。在书的注释中他提到的,别人告诉他我强烈反对框架的存在,我不确定这种评论从哪里来的,但是我要声明,事实根本不是那样子,相反我非常喜欢框架。为取得最佳效果,我还是建议你创建自己的框架结构,它能更好的为您或您的工作服务。
07.确保样式表的可读性和优化性之间的平衡。
风格格式化因人而异。有的开发者首先创建能够具有可读性的样式表风格,然后在文档还没有完全建好的同时就进行优化(去除评论,位,标签,运输效益等)。这是我想要推荐的一个好技术。然而,如果你不知道在什么情况下去做这些事,就尝试去找一种可以平衡样式表可读性跟优化性的一种风格。Steve Smith在这里有一个很好的建议就可以提供这个技术。 |
|