记住CSS中的10个“不要”
脚本之家 / 编程助手:解决程序员“几乎”所有问题!
脚本之家官方知识库 → 点击立即使用
自我进入这个行业,我就发现开发人员一直在努力征服CSS。
理由也很充分,开发人员是用逻辑思考的生物。添加一个DIV元素导致所有代码都不得不往下移一行,而另一个DIV“浮”到左侧,感觉没有任何意义。
你也一定听到过开发人员的抱怨:
“我们只需要向左边移动五个像素,但是…天哪!为什么整个都向下移动了一行。到底是哪里错了?!?!?!”
下面就是是我作为一个开发人员在编写CSS时认为不应该做的事情,欢迎大家指正,提出不同的看法。
根据我作为开发人员使用CSS的经验,下面是我的十个“不要”。
1.不要滥用类
在有意义的地方使用ID而不要使用类。这是一个使得浏览器能够更快访问DOM元素的方法。
2.不要把一切都扔进一个CSS文件中
分区CSS使其更易于管理。每一个CSS文件都可以分解成例如header.css、footer.css等逻辑组件。
3.不要命名选择器为“.red-with-green-dashed-lines”(红绿虚线)
根据页面上的组件命名你的选择器。例如:“header-left”,“content-title”或“content-date”更具描述性。
4.不要忘记注释
注释在CSS中非常重要,可用来理解每个样式如何与其他样式关联以及什么颜色方案适用于哪些组件。
5.不要害怕开发工具
现在的每个浏览器都有自己的一套开发工具,通常是按F12。这些工具在“调试CSS”时至关重要。
6.不要害怕覆盖
当然,CSS框架,例如Bootstrap和Foundation都较为巨大,但每一个都需要根据你的需要做出一点调整。当你得到一个更新的框架时,它将覆盖你的改变。与其深入挖掘庞大的CSS文件,还不如创建一个bootstrap-overrides.css文件,按照你的意愿调整框架,只是…
7.不要滥用! 很重要
CSS的整体思路是,从一个到另一个地“层叠”样式。 !重点是要记住排雷一样地踏遍所有早先的样式。 : -)
8.不要使用大量网络字体
这也是显而易见的,但有些人就是喜欢自己排版。只在网站上使用一个或两个(最多三个)网络字体,然后回归到浏览器默认设置,以保持网站的优化。
9.不要手动编码所有的CSS
为了保持CSS的DRY,可以使用CSS预处理程序例如LESS或SASS。使用这些预处理器的最大好处是,你可以定义变量,例如在上面定义配色方案,然后重复使用到所有CSS,而不必当你需要修改的时候追踪每个颜色。
10.不要让CSS过于“臃肿”
空格会占用CSS文件的空间空间。由于我们都希望我们的CSS能够快速加载,因此在部署到网站之前最好使用CSS压缩工具来一次瘦身。
以上就是本文的全部内容,希望对大家的学习有所帮助。
相关文章
- 下面小编就为大家带来一篇DIV+CSS 清除浮动常用方法总结。小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧2016-05-06
知识普及之CSS: body{font-size: 62.5%;}这种写法的原因
在网页设计中我们经常看见body{font-size: 62.5%;}这样的设置,为什么偏偏是62.5%呢?下面脚本之家小编给大家揭晓这个答案,一起了解了解吧2016-05-06- 国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别呢?下面脚本之家小编给大家详细介绍下2016-05-06
- 这是一组非常精美的纯CSS3丝带设计效果的代码。是用before和:after伪元素来制作各种丝带2016-05-05
- 是一段实现了将鼠标悬停在按钮上后,按钮将立即进行旋转显示更多提示语的效果代码,本段代码适应于所有网页使用,有需要的朋友们可以前来下载使用2016-05-05
- 这篇文章主要为大家详细介绍了CSS教程之div垂直居中的多种方法,还包括多行文本垂直居中的方法,感兴趣的小伙伴们可以参考一下2016-05-05
- 这篇文章主要介绍了CSS中如何灵活使用:before和:after,主要内容介绍了什么是:before和:after? 该如何使用:before和:after?感兴趣的小伙伴们可以参考一下2016-05-05
- 下面小编就为大家带来一篇CSS控制文本超出指定宽度显示省略号和文本不换行效果的实现。小编觉得挺不错的,现在分享给大家,也给大家做个参考2016-05-05
- 下面小编就为大家带来一篇CSS默认可继承样式详解。小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧2016-05-06
最新评论