CSS开发中的10个不要-阿里云开发者社区

开发者社区> 行者武松> 正文

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压缩工具来一次瘦身。

以上只是我作为一个开发人员在编写CSS时认为不应该做的事情。欢迎提出不同的看法。


作者:小峰

来源:51CTO

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
如何使用 jMeter Parallel Controller - 并行控制器以及一些常犯的错误
如何使用 jMeter Parallel Controller - 并行控制器以及一些常犯的错误
3 0
我在SAP这么多年使用过的IDE
我在SAP这么多年使用过的IDE
1 0
百度人脸识别:功能开通
百度人脸识别:功能开通
3 0
UBUNTU上新建GIT库
UBUNTU上新建GIT库
5 0
Sprint Application bootstrap的研究和调试
Sprint Application bootstrap的研究和调试
4 0
Eclipse被卡死了或者失去响应了后分析根源的一个小技巧
Eclipse被卡死了或者失去响应了后分析根源的一个小技巧
3 0
一些使用javap反编译出来的结果分析
一些使用javap反编译出来的结果分析
5 0
jMeter HTTP Request Defaults 的学习笔记
jMeter HTTP Request Defaults 的学习笔记
3 0
详细介绍OAuth2.0及实现和SpringSecurity的整合应用
详细介绍OAuth2.0及实现和SpringSecurity的整合应用
4 0
SpringSecurity实现自定义登录界面
前面通过入门案例介绍,我们发现在SpringSecurity中如果我们没有使用自定义的登录界面,那么SpringSecurity会给我们提供一个系统登录界面。但真实项目中我们一般都会使用自定义的登录界面,本文我们就来介绍下如何实现该操作。 注意:本文是在入门案例代码的基础上演示的!
4 0
+关注
行者武松
杀人者,打虎武松也。
14545
文章
2569
问答
文章排行榜
最热
最新
相关电子书
更多
文娱运维技术
立即下载
《SaaS模式云原生数据仓库应用场景实践》
立即下载
《看见新力量:二》电子书
立即下载