当前位置: 首页 > 科技观察

CSS开发中的10大禁忌

时间:2023-03-12 20:12:46 科技观察

进入这个行业以来,我发现开发人员一直在努力征服CSS。并且有充分的理由,开发人员是合乎逻辑的生物。添加一个DIV元素导致所有代码都必须向下移动一行,而另一个DIV向左“浮动”,感觉没有任何意义。你一定也听过开发者的抱怨:“我们只需要向左移动五个像素,但是……我的天啊!为什么整个东西都向下移动了一行。这到底是怎么回事?!?!?!“那么,今天就来聊一聊CSS中的十大错误。根据我作为开发人员使用CSS的经验,这里是我的十个“不要”。1.不要滥用类在有意义的地方使用ID而不是类。这是浏览器更快访问DOM元素的一种方式。2.不要将所有内容都放入一个CSS文件中对CSS进行分区以使其更易于管理。每个CSS文件都可以分解为header.css、footer.css等逻辑组件。3.不要将选择器命名为“.red-with-green-dashed-lines”(red-with-green-dashed-行)根据页面上的组件命名您的选择器。例如:“header-left”、“content-title”或“content-date”更具描述性。4.不要忘记注释注释在CSS中非常重要,它可以理解每种样式如何与其他样式相关以及哪些颜色方案适用于哪些组件。5.不要害怕开发工具。现在每个浏览器都有自己的一套开发工具,通常是按F12。当谈到“调试CSS”时,这些工具是至关重要的。6.不要害怕重写当然,像Bootstrap和Foundation这样的CSS框架非常庞大,但每个都需要根据您的需要进行一些微调。当您获得更新的框架时,它将覆盖您的更改。与其深入研究一个巨大的CSS文件,不如创建一个bootstrap-overrides.css文件,根据需要调整框架,然后...7.不要滥用!这很重要CSS的整个思想是从一种样式“分层”到另一种样式。!关键是要记住像我一样遍历所有以前的模式。:-)8.不要大量使用网页字体这也是显而易见的,但有些人就是喜欢自己排版。在您的网站上仅使用一种或两种(最多三种)网络字体并退回到浏览器默认设置以保持您的网站优化。9.不要手动编写所有CSS要保持CSSDRY,请使用CSS预处理器,例如LESS或SASS。使用这些预处理器的好处在于,您可以在顶部定义变量,例如配色方案,然后在所有CSS中重复使用它们,而无需在需要修改它们时追踪每种颜色。10.不要让CSS太“臃肿”空格会占用CSS文件中的空间。由于我们都希望我们的CSS能够快速加载,因此最好在部署到网站之前使用CSS压缩器将其精简。以上只是我作为一个开发者认为在编写CSS时不应该做的事情。欢迎不同意见。翻译链接:http://www.codeceo.com/article/css-10-bad-practices.html英文原文:Top10CSSBadPractices