成为一流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专家，成为顶尖的设计师

。
　　

转载于:https://blog.51cto.com/yxqpkhj/318416

成为一流CSS设计师的8大技巧相关推荐

原生态纯JavaScript 100大技巧大收集---你值得拥有
原生态纯JavaScript 100大技巧大收集---你值得拥有 1.原生JavaScript实现字符串长度截取 function cutstr(str, len) {var temp;var ico ...
jQuery Mobile高手必备的十大技巧和代码片段
本文转自51ito布加迪编译版本: http://mobile.51cto.com/hot-276160.htm 其中未发现英文原作链接,为尊重版权,google之后附上: http://www.we ...
谷歌浏览器设置请求头_2020年谷歌SEO优化十大技巧（四）
本篇是2020年谷歌SEO优化十大技巧的第4篇文章,在前面的三篇文章中 2020年谷歌SEO 优化十大技巧(一) --- Jack外贸建站谷歌SEO 优化教程主要讲的是页面的标题和关键词的优化研 ...
vray 用于室内渲染的10大技巧，看进来！
室内设计是建筑可视化艺术家最鼓舞人心的行业之一.我们不断发现令人难以置信的设计方案和超逼真的 CG 图像,即使是最敏锐的眼睛也会受到欺骗. vray 用于室内渲染的10大技巧之:寻找参考资料总是在一 ...
设计静态广告BANNER的10大技巧
设计完美的静态广告没那么简单,甚至可以说难以实现.设计广告,可能颠覆许多你作为一个设计师的想法.下面是创建吸引眼球广告的10大技巧,其中一些是出现在受欢迎网站上的真实广告案例. 设计完美的静态广告没那 ...
CSS入门六、常用技巧
零.文章目录 CSS入门六.常用技巧 1.精灵图 (1)为什么需要精灵图一个网页中往往会应用很多小的背景图像作为修饰,当网页中的图像过多时,服务器就会频繁地接收和发送请求图片,造成服务器请求压力过大 ...
java 自适应屏幕_自适应屏幕的CSS响应式布局设计技巧总结
摘要:这篇CSS教程栏目下的"自适应屏幕的CSS响应式布局设计技巧总结",介绍的技术点是"css响应式.响应式布局.响应式.自适应.CSS.设计",希望对大家开 ...
UI设计培训教程分享：UI设计师的色彩使用技巧
作为一名合格的UI设计师,色彩的使用是非常重要的,一个专业的UI设计师对于UI设计色彩的搭配是非常的出色的,下面小编就为大家分享UI设计培训教程:UI设计师的色彩使用技巧 UI设计培训教程分享:UI设 ...
GAN最新进展：8大技巧提高稳定性
生成对抗网络GAN很强大,但也有很多造成GAN难以使用的缺陷.本文介绍了可以克服GAN训练缺点的一些解决方案,有助于提高GAN性能. 生成对抗网络 (GAN) 是一类功能强大的神经网络,具有广泛的应用 ...

成为一流CSS设计师的8大技巧

成为一流CSS设计师的8大技巧相关推荐

最新文章

热门文章