前端知识库(lizh)
  • README
  • Bugs
    • 前端调试随笔
    • 浏览器常见问题概览
    • 浏览器兼容问题概览
    • HTML常见问题概览
    • CSS常见问题概览
    • JS常见问题概览
    • 移动端兼容性问题概览
    • 微信小程序开发
    • NodeJs常见问题概览
    • Mac常见问题概览
    • 微信开发遇坑指南
    • Npm包常见问题概览
    • 其他问题汇总
  • Css探索系列
    • CSS基础知识
    • CSS常见问答
    • CSS常见问答02
    • CSS应用示例
    • CSS应用示例02
    • 由Z Index引发的层叠上下文思考
    • 由浮动塌陷引发的块级格式上下文思考
    • CSS探索系列 Flex布局
    • CSS探索系列 Margin
    • CSS探索系列 Auto关键字
    • CSS探索系列 Gradient
    • CSS探索系列 Line Height
    • CSS探索系列 元素居中
    • CSS探索系列 动画
    • 为什么使用PostCSS处理CSS?
    • 重新认识伪类与伪元素
    • 自定义表单伪元素样式
    • 如何理解Css中的Display属性
    • 视口和软键盘对视口的影响
    • 关于Css
  • Frontend
    • 00 关于Web前端
    • 01 前端知识概览
    • 02 常用前端库概览
    • 基础 00 前端常见问题01
    • 基础 01 浏览器缓存
    • 基础 02 浏览器工作原理
    • 基础 03 谈谈前端跨源问题及解决方法
    • 进阶 01 Web性能优化
    • 进阶 02 搜索引擎优化(SEO)
    • 进阶 03 前端模块化编程
    • 进阶 04 规范代码:Linter、Prettier、EditorConfig
    • 进阶 11 前端自动化测试
    • 高级 01 前端安全
    • Vue2.X原理篇
    • Vue3初步了解及迁移指南
    • 重读Vue教程
    • React17.X原理篇
    • 你必须知道的React问题
    • 重读React教程
    • 聊一聊Cookie的一些问题
    • 如何理解HTTP响应的状态码
    • HTTP的历史演变及概述
    • Webpack4.X原理篇
    • Webpack基础入门篇
    • Webpack构建优化篇
    • TypeScript使用指南
    • 代码规范
      • 前端规范
      • HTML
      • CSS
      • JS
  • Html探索系列
    • HTML基础知识
    • HTML基础知识02
    • HTML常见问答
    • HTML经典实践用例
    • HTML元素的宽高及位置详解
    • Video元素的使用和常见问题总结
    • Html探索系列 Meta标签
    • DOCTYPE:文档类型与浏览器模式
    • DHTML(动态网页)简介
    • HTML标签详解
    • HTML布局的几种方式
    • HTML全局属性
    • 关于Html
  • Js探索系列
    • 基础知识
    • 常见问答
    • 应用示例
    • 趣味示例
    • 基础篇 05 AJAX
    • 基础篇 06 Window对象
    • 基础篇 07 Error、JSON、Math、Console对象
    • 基础篇 08 History、URL、Screen、Navigator、Location对象
    • 基础篇 09 文档对象模型(DOM)
    • 基础篇 10 Document对象
    • 基础篇 11 Element对象
    • 基础篇 12 Event对象
    • 基础篇 13 键盘、鼠标、触摸事件
    • 基础篇 15 CSS对象模型(CSSOM)
    • 进阶篇 01 Prototype对象和继承
    • 进阶篇 02 Promise对象
    • 进阶篇 07 迭代器(Iterator)
    • 进阶篇 08 Generator和Async函数
    • 进阶篇 09 JavaScript异步编程
    • Date对象和日期时间字符串格式
    • Canvas基础入门篇
    • Canvas进阶篇
    • SVG基础入门篇
    • 四种判断数据类型方法的优缺点
    • 深入理解JavaScript的浅拷贝和深拷贝
    • 谈谈JavaScript的作用域和上下文
    • 复制内容到剪贴板
    • 关于Javascript
  • NodeJs
    • 关于Node.Js
    • Node.Js:三种调试方法
    • Npm包管理器简介及一些机制
    • NPM:Package.Json详解(中文)
    • NPM:从零开始,开发一个软件包
    • NPM:常用命令
    • Node.Js:Fs(文件系统)
    • Node.Js:Global(全局变量)
    • Node.Js:HTTP
    • Node.Js:Module(模块)
    • Node.Js:Path(路径)
    • Node.Js:Readline(逐行读取)
  • Research
    • 极细边框(1px边框)实现方式
    • 如何监控前端异常?
    • H5页面跳转和刷新
    • Web主题切换和个性化定制方法总结
    • Vue SSR(服务端渲染)的简单实现
    • 基于Create React App打造代码规范化的React+Ts项目
    • H5可视化编辑
    • Web常用功能
    • Javascript加密混淆
    • Vue如何导入TypeScript
    • 移动端PDF预览
    • 纯CSS绘制箭头
    • 网站性能测量和优化方法
  • Tech
    • GOOGLE浏览器的搜索技巧
    • Curl的用法指南
    • Sublime3插件篇
    • Charles安装及使用
    • Nginx基础使用
    • 排序算法(Javascript)
    • 代码整洁之道(摘录笔记)
    • Java的24种设计模式与7大原则
    • 观察者和发布订阅模式
  • Tools
    • Git
      • Git基础教程
      • Git常见问题
    • Gitbook
      • Gitbook入门篇
      • Gitbook插件篇
      • Gitbook进阶篇
由 GitBook 提供支持
在本页
  • @charset
  • 代码风格
  • 属性书写顺序

这有帮助吗?

  1. Frontend
  2. 代码规范

CSS

@charset

样式文件必须写上 @charset 规则,并且一定要在样式文件的第一行首个字符位置开始写,编码名用 UTF-8 。

@charset "UTF-8";
  • UTF-8 编码:为世界统一编码,可以兼容全世界的操作系统,不会出现乱码情况。缺点是体积稍大点。

  • **gb2312 编码:**国外的浏览者可能会出现乱码,获提示安装语言包。一般,网站提供给全球看的一般用UTF-8,仅仅针对国内的用gb2312 就可以了。体积稍小点,因为程序产生的网页文本使用 ANSI 编码格式,会比 UTF-8 文本编码节省一些体积,访问速度会稍微快一点点。

  • 使用 UTF-8 编码有 2 个要注意:

    • 网页的 meta 必须有这句:<meta charset="UTF-8">。

    • 网页的文本格式必须保存为 UTF-8 格式。

代码风格

  • class用"-"连接,id用驼峰命名。

  • 使用展开格式书写样式,即一个属性一行,每个属性声明末尾都要加分号。

  • **选择器:**尽量少用通用选择器 *。

  • 不使用 ID 选择器。

  • 不使用无具体语义定义的标签选择器。

  • **代码缩进:**统一使用两个空格进行代码缩进,使得各编辑器表现一致(各编辑器有相关配置)。

  • 左括号与类名之间一个空格,冒号与属性值之间一个空格。

  • 逗号分隔的取值,逗号之后一个空格。

  • 为单个css选择器或新申明开启新行。

  • 十六进制数值能用简写的尽量用简写,例如使用 #fff 替代 #ffffff。

  • 不要为 0 指明单位。

  • 去掉小数点前面的 0。

  • css属性值需要用到引号时,统一使用单引号。

  • 图片引入不需要引号。

属性书写顺序

  • 布局定位属性:display、position、float、clear、visibility、overflow。

  • 自身属性:width、height、margin、padding、border、background。

  • 文本属性:color、font、text-decoration、text-align、vertical-align、white- space、break-word。

  • 其他属性(CSS3):content、cursor、border-radius、box-shadow、text-shadow、background: linear-gradient …。

    body {
        /* 定位属性 */
        display: flex;
        position: absolute;
        float: left;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        overflow: hidden;
        clear: both;
        z-index: 100;
        content: '';
        list-style: square;
        visibility: visible;
    
        /* 自身属性 */
        width: 100px;
        height: 100px;
        border: 10px solid #fff;
        padding: 10px;
        margin: 10px;
        background: #fff;
    
        /* 文字样式 */
        color: white;
        font-family: '微软雅黑';
        font-size: 14px;
        font-style: normal;
        font-weight: bold;
        font-varient: normal;
    
        /* 文本属性 */
        text-align: center;
        vertical-align: middle;
        text-transform: none;
        text-indent: 2px;
        text-decoration: underline;
        letter-spacing: 10px;
        word-spacing: 10px;
        white-space: 10px;
        text-overflow: ellipsis;
    }
  • 有浏览器前缀的属性在前,标准属性在后。

    .border-radius {
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        -o-border-radius: 10px;
        -ms-border-radius: 10px;
        border-radius: 10px;
    }
上一页HTML下一页JS

最后更新于1年前

这有帮助吗?