CSS开发中的10个易错点小白基础_经验小白指南

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

CSS开发中的10个易错点小白基础

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

CSS开发中的10个易错点小白基础_经验小白指南

CSS开发中的10个易错点小白基础_经验小白指南根据我作为前端开发人员使用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时认为不应该做的事情。希望能帮助到各位前端同行!

海计划公众号
(0)
上一篇 2020/03/30 07:15
下一篇 2020/03/30 07:14

您可能感兴趣的内容

  • 验证码的分类小白入门 网页验证码有哪些方式?_验证小白基础

    早期的互联网是没有验证码的,随着后来计算机程序的发展,黑客编写了模仿登录、恶意破解密码、刷票、论坛灌水等恶意程序,破坏了整个网络的平衡性。于是验证码这种验证是否是人工操作的检验机制便产生了。随着验证码的出现,它可以防止:恶意破解密码、刷票、论坛灌水,有效防止某个黑客对某一个特定注册用户用特定程序暴力破解方式进行不断的登陆尝试等等,给互联网带来了一定的安全性。

    2020/04/03
  • javascript的基本特点有哪些?小白帮助_特点使用指南

    JavaScript(通常缩写为JS)是一种高级的、解释型的编程语言;它是一门基于原型、函数先行的语言,是一门多范式的语言,它支持面向对象编程,命令式编程,以及函数式编程。javascript的基本特点1、javascript是一种解释性执行的脚本语言同其他脚本语言一样,JavaScript也是一种解释性语言,其提供了一个非常方便的开发过程。JavaScri

    2020/03/20
  • CSS 阴影动画优化技巧使用指南_阴影使用帮助

    box-shaodw 在我们的工作中使用以及越来越多,伴随阴影的动画或多或少都有一点。假设,我们有下面这样一个盒子:div {width: 100px;height: 100px;box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    }希望 hover 的时候,盒阴影从 box-shadow: 0 2px 4px rgba(0,

    2020/03/23
  • 快递员凌晨送件,将下班程序员误认成小偷基础知识教程_程序员菜鸟教程

    近日,杭州一位快递员深夜前往某小区送快递,却把深夜下班程序员误认为“小偷”的视频,在社交媒体上引发了关注。在小区道路上,一男子蹲在一辆电动车前捣鼓着车座,电动车的前座还绑着好几个快递箱。快递员走上前,拦住该男子的电瓶车车把,与其进行语言上的沟通,现场两人发生了轻微的肢体拉扯。据了解,快递员小哥叫小董,是天猫直送负责配送该片区的快递员。11 月 11 日当天的

    2020/04/03
  • Flutter实现仿微信QQ侧滑菜单组件使用帮助_菜单基础入门

    相信大家对于这种需求肯定不陌生:侧滑出菜单,在Flutter 当中,这种需求怎么实现?需求分析老套路,先分析一下需求:1. 首先可以滑出菜单 2. 菜单滑动到一定距离完全滑出,未达到距离回滚 3. 菜单数量、样式随意定制 4. 菜单点击回调 5. 菜单展开时,点击 item 收回菜单(见QQ)代码实现需求明了以后就可以写代码了。1. 首先可以滑出菜单最基本的

    2020/03/26
  • Docker—大型项目容器化改造使用攻略_Docker使用帮助

    虚拟化和容器化是项目云化不可避免的两个问题。虚拟化由于是纯平台操作,一个运行于linux操作系统的项目几乎不需要做任何改造就可以支持虚拟化。而项目如果要支持容器化则需要做许多细致的改造工作。容器化相对于虚拟化的优势也相当明显,运行于裸机性能高,秒级启停容器,更不用说开发、测试、布署一致的环境(DevOps理念),以及上篇提到的微服务的能力。大家还可以找到各种

    2020/03/31
  • ES6 模块化和 .vue组件的应用举例入门基础知识_模块化菜鸟指南

    关于ES6 Module 的语法,详情可以查看阮一峰老师的《ECMAScript 6 入门》里面关于Module的章节Module 的语法,本文主要讲下ES6 模块化与 .vue 组件的一个应用。ES6 模块与 CommonJS 模块的差异以下部分内容引用阮一峰老师的《ECMAScript 6 入门》这一章节ES6 模块与 CommonJS 模块的差异开始之

    2020/03/26
  • js多叉树结构的数据,parent表示法转成children表示法入门基础教程_算法小白知识

    最近碰到的问题,有个数组,数组元素是对象,该对象的结构就如树的parent表示法的节点一样。形象点讲就是该数组存放了树的所有“叶子节点”,并且叶子节点内存有父节点,一直到根节点为止,就如存了一条从叶子节点到根节点路径。现在有要求是将这个数组转成一个children表示法的对象,即从根节点开始,每个节点存有其子节点数组。转化效果如下(节点必须有个唯一标识符,以

    2020/04/03
  • imgcook小白指南_通过设计稿一键智能生成前端视图代码

    imgcook小白指南 官方网址:https://imgcook.taobao.org/ GitHub:https://github.com/taofed/imgcook 简介描述…

    2020/03/10
  • css3 过渡和动画入门指南_动画入门知识

    过渡 transition1.过渡的定义和使用在没有过渡属性的时候,当一个元素的属性值发生变化时,浏览器就会将个这个元素瞬间渲染成新属性值的样式。例如一个定位元素top:0,动态修改成top:100px,这个元素就瞬间跑到100px的位置,有时候我们为了达到某种视觉效果,希望它以动画的形式在一定的时间内,从旧的样式转变成新的样式,而这个过程就是过渡。过渡其实

    2020/03/23
  • 优秀网页设计菜鸟教程下载优秀Web设计的69条设计原则_设计入门指南

    好的设计能够帮助企业提升数据,同时还可以提供用户一个良好的使用体验。GoodUI 总结了一个长达69条设计原则的清单(不断增加中),列举了他们认为非常重要的设计要点。与以往的一些文章不一样的是这里提到的69点其中有一部分 GoodUI 已经通过 AB Test 验证过可行性。当然分析报告是需要付费的,单篇39美金。不过今天讨论的重点并不是付费报告,而是这69

    2020/04/03
  • 自由人入门指南_自由职业者远程工作对接平台

    自由人入门指南 官方网址:http://www.freemancn.com/ 简介描述:自由职业者远程工作对接平台 自由人是一个远程工作对接平台,也是一个人才共享服务平台,为110…

    2020/03/06
  • Vue基础入门教程_Vue.js是一套构建用户界面的渐进式JavaScript框架

    Vue基础入门 官方网址:https://cn.vuejs.org/ GitHub:https://github.com/vuejs/vue 简介描述:Vue.js是一套构建用户界…

    2020/03/05
  • CSSwinner基础入门_优秀CSS网站界面和交互设计获奖作品

    CSSwinner基础入门 官方网址:https://www.csswinner.com/ 简介描述:优秀CSS网站界面和交互设计获奖作品 CSSwinner是一个针对网页设计的作…

    2020/03/10
  • JS引擎V8如何与 Lite 模式两开花?菜鸟指南_引擎基础入门

    去年年底,V8 团队启动了一个名为 V8 Lite 的项目,旨在大幅降低 V8 的内存使用率。最开始,团队准备把 V8 Lite 作为 V8 的独立模式,专门用于低内存的移动设备与嵌入式设备,因为这些设备更关注的是减少内存使用而不是执行速度。在这个项目研发的过程中,开发团队发现专门为这个 Lite 模式所做的内存优化其实也可以迁移到原来的 V8 上,直接两开

    2020/03/24
  • apache的<directory>语句以及属性的含义零基础入门_Apache入门基础

    在整完apache和tomcat的之后我觉得有必要把和它下面的属性捋顺一下。如何访问根目录下的目录http://192.168.1.12/test/第一.缺省apache不允许访问http目录(没有定义,就没有访 问权限)访问目录http://192.168.1.12/test/会显示: Forbidden
    You don’t hav

    2020/04/03