关闭

CSS开发中的10个易错点

时间: 2019-06-05阅读: 742标签: 经验

我发现前端开发人员一直在努力征服css。理由也很充分,开发人员是用逻辑思考的生物。添加一个div元素导致所有代码都不得不往下移一行,而另一个div“浮”到左侧,感觉没有任何意义。你也一定听到过开发人员的抱怨:“我们只需要向左边移动五个像素,但是…天哪!为什么整个都向下移动了一行。到底是哪里错了?!?!?!”

根据我作为前端开发人员使用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时认为不应该做的事情。希望能帮助到各位前端同行!

站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

链接: http://www.fly63.com/article/detial/4029

摆脱JS框架,5年web组件开发经验总结

别再用 JS 框架了,转向可复用、可正交组合的 HTML+CSS+JS 单元吧。这几年我零零碎碎写过一些进展,现在既然 Jon 问到了,我觉得有必要把这些总结成一篇文章概括一下。我和我的团队一直在用 Web 组件来构建我们的 Web UI。

来自10位成功IT人士的23条经验教训

我们是从一个只有3个人其他啥都没有的创业公司逐步成长为一家大型的具备可扩展性,业务操作能力,数据库和产品开发的企业。如果你真心醉心于做企业,那么这就应该成为你的目标

优秀程序员的代码经验总结

这是一篇值得收藏起来,隔三差五就拿来重读的文章!因为作者向你保证,他“遇到的所有糟糕的代码,都是因为没采纳这些实践经验。而任何一段优秀的代码,都采纳了至少部分实践经验。”

20年程序员分享编程经验

从11岁时,我就一直在编程,并且一直都很喜欢技术和编程。这些年来,我积累了一些艰难又容易的经验。作为一名程序员,你或许还没这些经验,但我会把它们献给那些想从中学到更多的朋友

从业 20 年的程序员,“盘”出来的 5 种编程经验

一个拥有 20 年编程经验的“熟手”,编程干货有多少?本文的作者是一名从业 20 年的程序员,在本文中,他分享了自己这 20 年来学到的 5 种编程经验:重复的知识最糟糕、把代码当成一种债务、对高级开发人员信任但去验证、使用 TDD

跳槽经验教训整理

战线切勿拖太长,除非练手,否则不是真心想去的公司就别试了。对公司信息的了解要放在平时,多与同事朋友了解沟通,偶尔逛逛blind一亩三分地一类,这样才能确定下次跳槽的目标,有的放矢。选公司不是买菜!别见一个爱一个

项目中前端开发问题经验总结

ie下websocket的安全限制问题:数据看板中的数据大部分都是实时数据或前一天统计的历史数据,因此这边后端考虑采用websocket来实时和定时推送数据来保证数据的实时性和有效性。而前端开发这边为了提高前端开发的复用性,采用了在各个组件中开发成一个个的小部件

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!