CSS开发中的十大错误用法

更新日期: 2020-01-02 阅读: 2.5k 标签: 错误

自从接触前端软件开发以来,我发现开发猿一直在努力征服着css。 理由也很充分,开发人员是用逻辑思考的生物。添加一个DIV元素导致所有代码都不得不往下移一行,而另一个DIV“浮”到左侧,感觉没有任何意义。

你也一定听到过开发人员的抱怨:“我们只需要向左边移动五个像素,但是…天哪!为什么整个都向下移动了一行。到底是哪里错了?!?!?!”

所以,这篇文章就和大家来聊一聊CSS中的十大错误的做法。


1.不要滥用类

在有意义的地方使用ID而不要使用类。这是一个使得浏览器能够更快访问dom元素的方法。


2.不要把一切都扔进一个CSS文件中

分区CSS使其更易于管理。每一个CSS文件都可以分解成例如header.css、footer.css等逻辑组件。


3.不要害怕开发工具

现在的每个浏览器都有自己的一套开发工具,通常是按F12。这些工具在“调试CSS”时至关重要。


4.不要忘记注释

注释在CSS中非常重要,可用来理解每个样式如何与其他样式关联以及什么颜色方案适用于哪些组件。


5.不要命名选择器为“.red-with-green-dashed-lines”(红绿虚线)

根据页面上的组件命名你的选择器。例如:“header-left”,“content-title”或“content-date”更具描述性。


6.不要滥用 !很重要

CSS的整体思路是,从一个到另一个地“层叠”样式。 !重点是要记住排雷一样地踏遍所有早先的样式。


7.不要让CSS过于“臃肿”

空格会占用CSS文件的空间空间。由于我们都希望CSS能够快速加载,因此在部署到网站之前最好使用CSS压缩工具来一次瘦身。


8.不要使用大量网络字体

有些人喜欢自己排版。只在网站上使用一个或两个(最多三个)网络字体,然后回归到浏览器默认设置,以保持网站的优化。


9.不要手动编码所有的CSS

为了保持CSS的DRY,可以使用CSS预处理程序例如LESS或SASS。使用这些预处理器的最大好处是,你可以定义变量,例如在上面定义配色方案,然后重复使用到所有CSS,而不必当你需要修改的时候追踪每个颜色。


10.不要害怕覆盖

当然,CSS框架,例如Bootstrap和Foundation都较为巨大,但每一个都需要根据你的需要做出一点调整。当你得到一个更新的框架时,它将覆盖你的改变。与其深入挖掘庞大的CSS文件,还不如创建一个bootstrap-overrides.css文件,按照你的意愿调整框架。


本文内容仅供个人学习、研究或参考使用,不构成任何形式的决策建议、专业指导或法律依据。未经授权,禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载,请保留原文来源信息,不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持!

链接: https://fly63.com/article/detial/7127

相关推荐

解决Cannot read property range of null 错误

vue工程npm run serve/start/dev启动时,node_modules文件报:Cannot read property range of null 错误,该问题是babel-eslint版本更新问题导致的;

开始使用Vue 3时应避免的10个错误

Vue 3 稳定已经有一段时间了。许多代码库正在生产中使用它,其他人最终也必须进行迁移。我有机会与它一起工作,并记录了我的错误,这可能是你想避免的。

HTTP 400 错误 - 请求无效 (Bad request)

在ajax请求后台数据时有时会报 HTTP 400 错误 - 请求无效 (Bad request);出现这个请求无效报错说明请求没有进入到后台服务里;原因:前端提交数据的字段名称或者是字段类型和后台的实体类不一致

nodejs提示 cross-device link not permitted, rename 错误解决方法

文件上传的功能时候,调用fs.renameSync方法错误,这个提示是跨区重命名文件出现的权限问题。先从源文件拷贝到另外分区的目标文件,然后再unlink,就可以了。

Js中使用innerHTML的缺点是什么?

如果在JavaScript中使用innerHTML,缺点是:内容随处可见;不能像“追加到innerHTML”一样使用;innerHTML不提供验证,因此我们可能会在文档中插入有效的和破坏性的HTML并将其中断

javascript如何抛出错误?

throw语句用来抛出一个用户自定义的异常。当前函数的执行将被停止(throw之后的语句将不会执行),并且控制将被传递到调用堆栈中的第一个catch块。如果调用者函数中没有catch块,程序将会终止。

解决typescript Cannot redeclare block-scoped variable

没有依赖框架来写typescript,纯粹新建一个ts文件,使用tsc编译成js后,ts文件里的声明的变量、函数名都会报错:其实我们写的ts代码是没有问题的,只是ts会对我们声明的变量、具名函数、class都放在了全局作用域

不能执行已释放Script的代码

父页面初始化声明变量a为数组(数组对象是引用类型,赋值传递的是地址),创建iframe子页面后给父页面变量a赋值,赋值后销毁iframe子页面,再次调用变量a的时候就会抛出异常‘SCRIPT5011:不能执行已释放Script的代码’。

避免那些可恶的cannot read property of undefined 错误

Uncaught TypeError: Cannot read property foo of undefined. 是一个我们在 JavaScript 开发中都遇到过的可怕错误。或许是某个 API 返回了意料外的空值,又或许是其它什么原因,这个错误是如此的普遍而广泛以至于我们无法判断

自定义错误及扩展错误

当我们在进行开发的时候,通常需要属于我们自己的错误类来反映任务中可能出现的特殊情况。对于网络操作错误,我们需要 HttpError,对于数据库操作错误,我们需要 DbError,对于搜索操作错误,我们需要 NotFoundError,等等

点击更多...

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