http://codeguide.bootcss.com/#html-syntax  参考链接

属性顺序

HTML 属性应当按照以下给出的顺序依次排列,确保代码的易读性。

  • class
  • id, name
  • data-*
  • src, for, type, href
  • title, alt
  • aria-*, role

class 用于标识高度可复用组件,因此应该排在首位。id 用于标识具体组件,应当谨慎使用(例如,页面内的书签),因此排在第二位。

声明顺序

相关的属性声明应当归为一组,并按照下面的顺序排列:

  1. Positioning
  2. Box model
  3. Typographic
  4. Visual

由于定位(positioning)可以从正常的文档流中移除元素,并且还能覆盖盒模型(box model)相关的样式,因此排在首位。盒模型排在第二位,因为它决定了组件的尺寸和位置。

其他属性只是影响组件的内部(inside)或者是不影响前两组属性,因此排在后面。

不要使用 @import

与 <link> 标签相比,@import 指令要慢很多,不光增加了额外的请求次数,还会导致不可预料的问题。替代办法有以下几种:

  • 使用多个 <link> 元素
  • 通过 Sass 或 Less 类似的 CSS 预处理器将多个 CSS 文件编译为一个文件
  • 通过 Rails、Jekyll 或其他系统中提供过 CSS 文件合并功能

编辑器配置

将你的编辑器按照下面的配置进行设置,以避免常见的代码不一致和差异:

  • 用两个空格代替制表符(soft-tab 即用空格代表 tab 符)。
  • 保存文件时,删除尾部的空白符。
  • 设置文件编码为 UTF-8。
  • 在文件结尾添加一个空白行。

HTML编码和CSS编码会遇到的问的更多相关文章

  1. css编码规范

    css编码规范 https://segmentfault.com/a/1190000002460968 常用样式测试工具 W3C CSS validator:http://jigsaw.w3.org/ ...

  2. CSS编码技巧

    前面的话 本文将从DRY.currentColor.inherit和合理使用简写这几方面来详细介绍CSS编码技巧 DRY DRY,即don`t repeat yourself,尽量减少代码重复 在软件 ...

  3. HTML编码规范、CSS编码规范

    HTML编码规范 IE 兼容模式 IE 支持通过特定的 标签来确定绘制当前页面所应该采用的 IE 版本.除非有强烈的特殊需求,否则最好是设置为 edge mode,从而通知 IE 采用其所支持的最新的 ...

  4. [css 揭秘]:CSS编码技巧

    CSS编码技巧 我的github地址:https://github.com/FannieGirl/ifannie 喜欢的给我一个星吧 尽量减少代码重复 尽量减少改动时需要编辑的地方 当某些值相互依赖时 ...

  5. 【规范】前端编码规范——css 规范

    编码 在 css 首行设置文件编码为 UTF-8. @charset "UTF-8"; class 命名 class 名称应当尽可能短,并且意义明确.使用有意义的名称,使用有组织的 ...

  6. CSS 编码中超级有用的工具集合

    当你开发网站和 Web 应用时,使用合适的工具可以节省大量的时间.本文我将收集一些非常有用的 CSS 编码工具,希望对你有帮助. Pure CSS Pure 是来自雅虎的 CSS 框架,使用 Norm ...

  7. Bootstrap-Other:CSS编码规范

    ylbtech-Bootstrap-Other:CSS编码规范 1.返回顶部 1. Bootstrap CSS编码规范 语法 用两个空格来代替制表符(tab) -- 这是唯一能保证在所有环境下获得一致 ...

  8. 8.Bootstrap CSS编码规范

    Bootstrap CSS编码规范 本节的介绍内容为 Bootstrap 中的 CSS 编码规范. 语法 用两个空格来代替制表符(tab) -- 这是唯一能保证在所有环境下获得一致展现的方法. 为选择 ...

  9. 任务五:零基础HTML及CSS编码练习加强版

    任务目的 针对设计稿样式进行合理的HTML架构,包括以下但不限于: 掌握常用HTML标签的含义.用法 能够基于设计稿来合理规划HTML文档结构 理解语义化,合理地使用HTML标签来构建页面 掌握基本的 ...

随机推荐

  1. 基于WAMP的Crossbario 安装入门

    简单学习和使用WAMP协议,Router 是crossbario, Client是Autobahn, 了解运作的流程. 测试环境是Centos6 虚拟机一台 目录为 /data/wamp/ ,用的是P ...

  2. 一种公认提供toString的方法_JAVA核心技术卷轴Ⅰ

    从JAVA核心技术卷轴Ⅰ:基础知识中整理得到. import java.lang.reflect.AccessibleObject; import java.lang.reflect.Array; i ...

  3. JUI/DWZ 分页 Servlet

    分页介绍 参考:官方用户手册中的"分页组件"         分页思路服务器返回当前页的数据,总条数,再由js来生成分页标签.分页是配合服务器端来处理的, 不是存js做的分页. 因 ...

  4. /sbin/insserv: No such file or directory

    /sbin/insserv: No such file or directory在Ubuntu下安装service服务,可能会报如下错误:/sbin/insserv: No such file or ...

  5. lua c函数注册器

    lua与c的交互 关于lua和c的交互,主要有两个方面,一是lua调用c的函数,而另一个则是c调用lua函数.而这些都是通过lua stack来进行的. c调用lua 在c里面使用lua,主要是通过l ...

  6. Web报表工具FineReport二次开发JS之字符串

    在报表开发过程中,有些需求可能无法通过现有的功能来实现,需要开发人员二次开发,以FineReport为例,可以使用网页脚本.API接口等进行深入的开发与控制. 考虑到JS脚本开发的使用较多,这里先先简 ...

  7. rpcz VC2010 构建

    rpcz VC2010 构建 rpcz 是应用ZeroMQ和Protobuf开发的RPC. 见: https://github.com/reinferio/rpcz 及 https://code.go ...

  8. jquery sortable的拖动方法内容说明和示例详解(转载http://www.jb51.net/article/45803.htm)

     所有的事件回调函数都有两个参数:event和ui,浏览器自有event对象,和经过封装的ui对象 ui.helper - 表示sortable元素的JQuery对象,通常是当前元素的克隆对象 u ...

  9. 03_Android NDK中C语言调用Java代码,javah的使用,javap的使用以及生成签名,Android.mk的编写,C代码的编写

     1  案例场景,通过C语言回调Java的代码,案例的最终界面: 2  案例的代码结构如下: 3 编写DataProvider的代码: package com.example.ndkcallbac ...

  10. daemontools安装和使用

    daemontools安装和使用 参考: http://cr.yp.to/daemontools/install.html daemontools用于自动重启进程.当某个关键服务进程崩溃,可以利用da ...