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. Chapter 2 User Authentication, Authorization, and Security(1):选择Windows和SQL 身份验证

    原文出处:http://blog.csdn.net/dba_huangzj/article/details/38657111,专题目录:http://blog.csdn.net/dba_huangzj ...

  2. 在maven中开发Spring需要的jar依赖

    在maven中开发Spring需要的jar依赖 <properties> <spring.version>4.0.6.RELEASE</spring.version> ...

  3. OpenCV 实现颜色直方图

    颜色直方图是在许多图像检索系统中被广泛采用的颜色特征.它所描述的是不同色彩在整幅图像中所占的比例,而并不关心每种色彩所处的空间位置,即无法描述图像中的对象或物体.颜色直方图特别适于描述那些难以进行自动 ...

  4. 一个不错的扩展:Ext.ux.container.ButtonSegment

    地址:http://www.sencha.com/forum/showthread.php?132048-Ext.ux.container.ButtonSegment

  5. 新IO建立的聊天程序

    服务端: package com.net.scday3; import java.io.IOException; import java.net.InetSocketAddress; import j ...

  6. SpriteBuilder中物理对象能否被缩放

    我前面早些时候提到物理形状不能被缩放. 现在我却说可以缩放它们,这是为啥呢? 好吧,拥有物理物体节点的缩放属性真心不能被动画化或改变在运行的时候; 但是你可以在SpriteBuilder中设置启用物理 ...

  7. 一个简单的基于 DirectShow 的播放器 1(封装类)

    DirectShow最主要的功能就是播放视频,在这里介绍一个简单的基于DirectShow的播放器的例子,是用MFC做的,今后有机会可以基于该播放器开发更复杂的播放器软件. 注:该例子取自于<D ...

  8. Socket层实现系列 — accept()的实现(一)

    本文主要介绍了accept()的系统调用.Socket层实现,以及TCP层实现. 内核版本:3.6 Author:zhangskd @ csdn blog 应用层 int accept(int soc ...

  9. MVVM With ReactiveCocoa让移动开发更简单

    作者:@雷纯锋2011 MVVM是一种软件架构模式,它是 Martin Fowler 的 Presentation Model 的一种变体,最先由微软的架构师 John Gossman 在 2005 ...

  10. HBase Master启动过程

    master启动过程: -->首先初始化HMaster -->创建一个rpcServer,其中并启动 -->启动一个Listener线程,功能是监听client的请求,将请求放入ni ...