技术干货 > 文章详情

web前端丨web前端CSS开发中的10个不要

jack_li3年前 web前端 html/css html5

        开发人员是用逻辑思考的生物。添加一个DIV元素导致所有代码都不得不往下移一行,而另一个DIV”浮”到左侧,感觉没有任何意义。


web前端丨web前端CSS开发中的10个不要.jpg


        你也一定听到过开发人员的抱怨:

        “我们只需要向左边移动五个像素,但是…天哪!为什么整个都向下移动了一行。到底是哪里错了?!?!?!”所以,我们今天就来聊一聊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压缩工具来一次瘦身。


原文来自i7758

推荐阅读:web前端丨web前端CSS开发中的10个不要

                 Web前端丨几个小众但炫酷的CSS技巧,拿去装逼

                 Web前端丨在一行代码里学点JavaScript

推荐学习:Web前端企业直通班带你玩转Web前端

——————

版权保护声明:本文仅代表作者观点,麦子学院可能会进行删节修改,但不代表麦子学院的官方立场。我们极其尊重并保护原创作品的版权,若原作者有任何疑问,请联系微信号:chengxuyuan8。

60

登录 后参与讨论

没有更多评论了

免费领取价值1888元求职宝典!

客服热线 400-862-8862

回到顶部