学好WEB前端之CSS规范

发布时间:2020-08-09 21:30:12 作者:智云编程
来源:ITPUB博客 阅读:152

CSS 指层叠样式表 (Cascading Style Sheets),定义如何显示 HTML 元素,但由于 CSS 天生全局性,随着项目复杂度增加,极易出现样式覆盖以及其它的问题。

1. 通用规范

文件编码

@charset 'UTF-8'; /* 注意字符集说明应在第一行 */

缩进规范

统一使用 两个空格缩进

web前端开发直播教程Q-q-u-n: 767273102 ,内有免费开发工具,零基础,进阶视频教程,希望新手少走弯路

2. 初始化规范

各浏览器厂商的初始样式都不一样,为了消除不同浏览器对 HTML 文本呈现的差异,我们常引入一些初始化样式,如 normalize.css、reset.css 等,当对于这些样式的引入我们需要注意下面几种情况:

* {
  padding: 0;
  margin: 0;
}

3. 代码规范

命名规范

class 应以功能或内容命名,不以表现形式命名
class 与 id 单词字母小写,多个单词组成时,采用中划线-分隔
使用唯一的 id 作为 Javascript hook, 同时避免创建无样式信息的 class

代码风格

字体规范

网站上使用 微软雅黑 字体有三种形式:
1、【侵权】图片中使用 微软雅黑 字体,比如网站头图
2、【安全】网站 CSS 用 font-family 声明网站使用 微软雅黑 字体,比如文章标题和正文
3、【侵权】网站通过 font-face 引用 微软雅黑 ,这种方式不常见

选择器规范

在严格遵照 BEM(Block Element Modifier) 时,建议只使用类选择器,但 BEM 书写麻烦,所以建议如下

web前端开发直播教程Q-q-u-n: 767273102 ,内有免费开发工具,零基础,进阶视频教程,希望新手少走弯路


属性顺序

CSS 属性顺序是 CSS 良好编码风格的一部分,有助于提高代码可读性,便于发现代码问题,有利于团队合作,但在项目中发现部分同学在书写属性顺序时较为随意,想到一个属性就写一个。

建议使用下列顺序进行书写

  1. 定位属性(position、display、float、left、right)
  2. 尺寸属性(width、height、padding、margin、border)
  3. 字体属性(color、font、text-align)
  4. 其他属性(background、cursor、outline)

目的是在浏览代码时,能逐步清晰目标元素的效果。

.test {
  display: block;
  position: relative;
  float: left;
  width: 100px;
  height: 100px;
  margin: 0 10px;
  padding: 20px 0;
  font-size: 12px;
  color: #333;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 10px;
}

4. 注释规范

单行注释

注释以  /*  开始,以  */  结束,注释内不能嵌套注释,注释内容 前后空一个空格

/* 推荐的单行注释 */
/*不推荐的单行注释*/

注:在 sass 和 less 等预处理语言上也可以使用双斜线注释,但编译后注释内容不会出现在 css 文件中,所以建议统一使用 /* */ 注释。

模块注释

有时候我们需要对一个模块(一段代码块)进行功能性说明,并希望能明显区分其它代码,我们可以模块注释的方式。

注释以  /*  开始,以  */  结束, 前后空一个空格 ,第一行填写 描述 ,最后一行行填写 分割线

/* 推荐的模块注释
---------------------------------------------------- */
/* 不推荐的模块注释 ---------------------------------------------------- */

*  文件信息注释

如果需要对一个文件进行功能性说明,方便其他人快速明白该文件的作用,推荐在文件开头(字符集说明下)写入下列注释,注释内容包括文件描述、创建人、创建时间等。

@charset "UTF-8";
/**
 * @desc 文件功能描述,方便其他人快速理解
 * @author 创建人
 * @date 创建时间
 */

5. 覆盖规范

vue 单文件组件修改样式不生效可使用  /deep/  或  >>>

6. 媒体查询

对于内部管理系统,商务多使用 ThinkPad 笔记本,屏幕分辨率为  1366*768 。建议使用 Resolution Test 浏览器拓展进行浏览器窗口大小调试。

下载地址: www.cnplugins.com/devtool/res…

常用尺寸如下

大小 描述
≥1366px 大屏幕 大桌面显示器
≥1200px 中等屏幕 桌面显示器
≥992px 中等屏幕 桌面显示器
≥768px 小屏幕 平板
<768px 超小屏幕 手机

优先 PC 端

默认按最大尺寸进行布局,当尺寸缩小时逐步变成移动端布局

body {
  background: gray;
}
@media screen and (max-width: 1366px) {
  body {
    background: red;
  }
}
@media screen and (max-width: 1200px) {
  body {
    background: yellow;
  }
}
@media screen and (max-width: 920px) {
  body {
    background: green;
  }
}
@media screen and (max-width: 768px) {
  body {
    background: black;
  }
}

优先移动端

默认按最小尺寸进行布局,当尺寸放大时逐步变成 PC 端布局

body {
  background: gray;
}
@media (min-width: 768px) {
  body {
    background: red;
  }
}
@media (min-width: 920px) {
  body {
    background: green;
  }
}
@media (min-width: 1200px) {
  body {
    background: yellow;
  }
}
@media (min-width: 1366px) {
  body {
    background: red;
  }
}

如果需要做打印样式进行适配,需要使用@media print

@media print {
  body {
    background: #fff;
  }
}

7. 单位规范

CSS 单位有两种,分别是 绝对单位 相对单位

使用较多的单位有 px、%、rem 三种, 建议 PC 端用 px 单位、移动端用 rem,需要具体控制尺寸还是使用 px

备注:如果需要计算不同单位下的值,可以使用 css3 方法 calc()_

web前端开发直播教程Q-q-u-n: 767273102 ,内有免费开发工具,零基础,进阶视频教程,希望新手少走弯路

8. 兼容性规范

私有属性的使用

正是由于浏览器厂商的不同,导致了一些样式需要加前缀才生效,下面的常见的浏览器内核和前缀

浏览器 内核 前缀
Firefox Gecko -moz-
Chrome WebKit -webkit-
IE Trident -ms-
Safari WebKit -webkit-
Opera Presto -o-
国内知名浏览器 WebKit -webkit-
常见手机浏览器 WebKit -webkit-

CSS3 浏览器私有前缀在前,标准前缀在后

.test {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -o-border-radius: 10px;
  -ms-border-radius: 10px;
  border-radius: 10px;
}

备注:在 webpack 环境下,可以使用 postcss-loader 自动添加私有前缀_


推荐阅读:
  1. 如何快速学好Web前端技术 怎么达到企业需求
  2. Web前端薪资待遇怎么样 如何学好Web前端开发

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

css web 学好

上一篇:AnyDesk 5.5.3免费版 — 远程控制软件

下一篇:SQL Server数据库mdf文件中了勒索病毒*.mdf.bigbosshorse

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》