CSS使用八大基本原则

开发 前端
CSS是一个非常强大的网站设计标记语言,为了确保您在正确的轨道上,这里有8项CSS原则,每个网页设计师应该遵循,相信对你的学习一定会有所帮助。

这里向大家描述一下CSS使用的八大基本原则 ,比如简写的使用,使用多种简写方法,尽量减少了您的文件,同时也减小了网站的加载时间。此外,它不仅可以更容易地组织你的代码,而且对于未来修改代码提供了方便。

成为***CSS设计师的8大技巧

CSS是一个非常强大的网站设计标记语言。虽然你可能会认为,任何人都可以转去写CSS代码,但是为了确保您在正确的轨道上,这里有如下8项CSS原则,每个网页设计师应该遵循。

1、W3C验证

  如果你是1个正在写CSS编码的人员,那么建议您每次对您所创建的CSS代码进行验证。但是,有很多设计师却在这个重要的一步跳过。验证您的代码清理反馈的任何问题,确保它的工作对访问者友好。除了验证你的CSS文件,你也应该验证您的HTML或XHTML文件。验证这些文件之前,请确保您已经声明了正确的HTML或XHTML的doctype。声明您的doctype似乎是一个简单的细节,但很多设计师经过很多次验证不通过以后才发现原来是因为他没有声明doctype。

2、文件

  无论你的项目是一个人单干还是团队协作,很重要的是文件创建工作。如果您是在团队中单人项目,总有机会,你的单人项目将最终演变成一个团队项目,如果发生这种情况,手头上有文件会变得很多,创建好文件归类与名称,写好注释,协作更方便。即使在如果你是个人单干的项目,当您在创意或使用上突然想用到某些文件,您却不知道放在哪去了?当您想找到某段代码,却发现因为没有注释变得非常难?

  涉及到创建CSS代码的注释文件,大多数设计师的自然将它放入把它直接关系到他们的代码/*和*/中。技术上来说这种做法没有什么不正确的。然而,注释直接加入到您的CSS代码会增加该文件大小,从而增加加载时间,减缓一个网站的整体性能的大小。如果你想成为***的CSS代码编写员,你应该将注释写在一个单独的文件里。

  虽然我知道这做法很有效,但是还是有很多人不同意这种做法。如果你拒绝将注释写在一个单独的文件中,退而求其次,您可以使用CSS压缩机(事实上,即使您将注释写在一个单独的文件中,你仍然可以使用这个CSS压缩机)。当然您也可以从谷歌搜索更好的CSS压缩机。

3、对Hacks说不

  Hacks是为了让CSS编码在不同浏览器与平台中维持网站正常显示的做法。尽管在社会上Hacks已经成为一个可以接受的做法,这并不意味着“CSShacking”是你应该遵守的原则。这种设计方法的问题是,它意味着你为了解决问题而将标准的CSS变得更复杂。虽然你可能认为一个或两个Hacks不会伤害任何人,但是这种思维可以对您的整体设计思想产生负面影响。

4、不滥用的div

  由于div的提供了高度的灵活性,很容易让新人过度使用他们。为了避免过度使用DIV标签,你应该在写HTML代码的时候总是问自己是否有一个实际的HTML标记。例如,你为什么不使用HTML标题标记,例如H1和H2?

  一旦你开始考虑到了div的问题,你很快就会使用适当的HTML标记,而不是自动创建一个新DIV。它不仅可以减少代码量,而且还会给你的代码更合理的加载时间。

5、Class类的命名

  如果你问一个新的设计师,他们决定如何命名Class,他们可能会说,这并不重要。虽然从技术上来说,CSS类的命名没有什么严格的要求,但我们必须纠正那些错误的做法。

  假设您要创建一个类来控制网页上的某部分。比如1个盒子将位于页面底部,它包含读者的评论和黑色的填充背景,很多设计师也许会随便命名,或是叫“黑色底部”之类的。那么,我们会建议命名为“评论”。因为如果您一但决定更改背景颜色为蓝色或是不把他放在页面底部,那么“黑色底部”这个名称就再不适用了。

6、使用简写

  一旦你习惯简写方式,它也是您成为一个好的设计师最有效的做法之一。

  使用多种简写方法,尽量减少了您的文件,同时也减小了网站的加载时间。此外,它不仅可以更容易地组织你的代码,而且对于未来修改代码提供了方便。

7、不要忘记打印机作为一个优秀的设计师,你应该更倾向于热爱技术,因为你是少数的一部分,生活和呼吸在技术中。不过,由于人们仍然需要打印出来自互联网的信息,那么您要考虑使CSS内容对打印机友好。您的同行欣赏您所创建的网站,也许他们有兴趣想了解您的布局,也许他们打算将您的CSS打印出来参考,所以作为好的设计师请不要忽视打印机。

8、永不停止学习

  你可能认为这***的原则听起来陈词滥调,但也可说是8条中最重要。如果你致力于成为***的设计师,您需要确保您一直致力于扩大你的CSS知识。幸运的是,如果你愿意,这很容易做到,并继续你的CSS教育。只需键入“CSS”到谷歌,你会看到有48300.0万结果供您浏览。
  除了来自网络上的学习,你也可以和同事,朋友,书籍上学,直到您成为CSS专家,成为***的设计师。

【编辑推荐】

  1. 实例解析CSS中display属性使用
  2. CSS样式实现快速定位bug的六大技巧
  3. CSS中link和@import的区别
  4. CSS2.0中page-break-after属性用法
  5. 技术分享 使用不同CSS样式兼容多种浏览器

 

责任编辑:佚名 来源: css3-html5.com
相关推荐

2010-09-09 13:59:55

CSS

2010-07-19 15:58:12

面试原则

2014-08-25 09:08:23

大数据应用开发

2010-08-10 09:53:45

Flex性能优化

2010-08-25 15:50:43

2019-09-18 18:56:34

JavascriptOOP前端

2010-09-28 15:07:48

JavaScript

2010-08-12 10:03:21

Flex性能优化

2022-10-25 09:50:56

2017-04-17 20:50:50

2021-09-13 10:30:42

C++代码设计模式

2011-08-03 09:37:55

云计算

2012-05-31 09:33:03

云计算CIO

2012-03-06 09:02:41

软件开发

2015-06-09 11:08:20

2020-01-08 18:27:53

七项基本原则高效漏洞管理IT

2015-06-04 10:13:56

DCIM运维管理

2011-04-22 16:17:53

电脑维修

2010-05-21 11:22:04

2011-06-16 13:45:14

点赞
收藏

51CTO技术栈公众号