前台开发中的CSS使用规范,来学习一下吧

  • 时间:2019-01-14 22:10 作者:coder分享 来源:coder分享 阅读:174
  • 扫一扫,手机访问
摘要:前言在前两篇文章中,我们有讲过前台开发过程中需要注意到的HTML和Javascript规范问题,假如还没看过的,可以去看一下这两篇文章。今天这篇文章我们继续学习一下关于CSS的规范问题。前台开发中的Javascript规范,来学习一下吧前台开发过程中的HTML规范,来学习一下吧CSSID和Class

前言

在前两篇文章中,我们有讲过前台开发过程中需要注意到的HTML和Javascript规范问题,假如还没看过的,可以去看一下这两篇文章。今天这篇文章我们继续学习一下关于CSS的规范问题。

  1. 前台开发中的Javascript规范,来学习一下吧

  2. 前台开发过程中的HTML规范,来学习一下吧

前台开发中的CSS使用规范,来学习一下吧

CSS

ID和Class

ID作为网页上唯一标识一个元素的属性,在CSS中不推荐被使用,而应该使用Class来代替。

因而,我们不推荐下面采用id的写法。

前台开发中的CSS使用规范,来学习一下吧

不推荐写法

我们推荐下面采用class的写法。

前台开发中的CSS使用规范,来学习一下吧

推荐写法

而且,CSS的选择器具备不同的权重,大致可以表示成这样。

前台开发中的CSS使用规范,来学习一下吧

选择器权重

通过上面的权重图可以看出,一个ID选择器的权重是class选择器权重的10倍,因而假如使用ID选择器来定义CSS样式,很容易就会覆盖后面定义的Class选择器,而且还不容易发现。

通过下面一段代码,就能说明问题。

前台开发中的CSS使用规范,来学习一下吧

代码

避免使用标签名

在编写CSS时,应该尽量使用具备语义化的class选择器,而不应该直接使用标签名,这样可以使得CSS样式更加容易维护。

我们可以考虑这样一种情况,假如页面上的标签需要更换,而我们使用了标签名去定义样式,这样就会修改CSS文件中的内容;而假如我们只采用了Class去定义样式,那么页面上标签的修改并不会影响到CSS文件中的内容。

因而我们不推荐下面这种写法。

前台开发中的CSS使用规范,来学习一下吧

不推荐写法

我们推荐下面这种写法。

前台开发中的CSS使用规范,来学习一下吧

推荐写法

缩写属性

在CSS中提供了很多例如margin, padding一样的缩写属性,在编写CSS样式时,应当尽可能的使用缩写属性,不仅可以提高代码的可读性,而且还会提高代码执行效率。

因而,我们不推荐下面这种写法。

前台开发中的CSS使用规范,来学习一下吧

不推荐写法

我们推荐以下使用缩写属性的写法。

前台开发中的CSS使用规范,来学习一下吧

推荐写法

0值

在属性值为0时,可以省略掉后面的单位。

因而我们不推荐下面这种写法。

前台开发中的CSS使用规范,来学习一下吧

不推荐

我们推荐下面的写法。

前台开发中的CSS使用规范,来学习一下吧

推荐写法

属性公告

为了保证书写CSS样式的一致性,属性名后紧跟冒号,冒号和属性值之间有一个空格。而且每个选择器和属性公告都应该另起一行。

因而,我们不推荐以下写法。

前台开发中的CSS使用规范,来学习一下吧

不推荐写法

我们推荐以下写法。

前台开发中的CSS使用规范,来学习一下吧

推荐写法

引号

在需要使用到引号的地方,推荐使用双引号(""),而不是单引号(''),在需要使用到url时,不应该使用引号。

因而我们不推荐下面的方式。

前台开发中的CSS使用规范,来学习一下吧

不推荐写法

我们推荐使用下面写法。

前台开发中的CSS使用规范,来学习一下吧

推荐写法

结束语

今天这篇文章讲解的是前台开发中的应该遵循的CSS规范,内容可能不是很全面,大家可以自行补充。

  • 全部评论(0)
最新发布的资讯信息
【系统环境|服务器应用】在CentOS 7上如何安装Gogs 0.11.53(2020-02-10 10:14)
【系统环境|】淘码库,据消息称已被调查。淘码库源码网,已经无法访问!(2020-01-14 04:13)
【系统环境|服务器应用】Discuz隐藏后台admin.php网址修改路径(2019-12-16 16:48)
【系统环境|服务器应用】2020新网站如何让百度快速收录网站首页最新方法,亲测有用!免费(2019-12-16 16:46)
【系统环境|服务器应用】Discuz发布帖子时默认显示第一个主题分类的修改方法(2019-12-09 00:13)
【系统环境|软件环境】Android | App内存优化 之 内存泄漏 要点概述 以及 处理实战(2019-12-04 14:27)
【系统环境|软件环境】MySQL InnoDB 事务(2019-12-04 14:26)
【系统环境|软件环境】vue-router(单页面应用控制中心)常见用法(2019-12-04 14:26)
【系统环境|软件环境】Linux中的Kill命令(2019-12-04 14:26)
【系统环境|软件环境】Linux 入门时必学60个文件解决命令(2019-12-04 14:26)
手机二维码手机访问领取大礼包
返回顶部