HTML编码和CSS编码会遇到的问
http://codeguide.bootcss.com/#html-syntax 参考链接
属性顺序
HTML 属性应当按照以下给出的顺序依次排列,确保代码的易读性。
- class
- id, name
- data-*
- src, for, type, href
- title, alt
- aria-*, role
class 用于标识高度可复用组件,因此应该排在首位。id 用于标识具体组件,应当谨慎使用(例如,页面内的书签),因此排在第二位。
声明顺序
相关的属性声明应当归为一组,并按照下面的顺序排列:
- Positioning
- Box model
- Typographic
- Visual
由于定位(positioning)可以从正常的文档流中移除元素,并且还能覆盖盒模型(box model)相关的样式,因此排在首位。盒模型排在第二位,因为它决定了组件的尺寸和位置。
其他属性只是影响组件的内部(inside)或者是不影响前两组属性,因此排在后面。
不要使用 @import
与 <link> 标签相比,@import 指令要慢很多,不光增加了额外的请求次数,还会导致不可预料的问题。替代办法有以下几种:
- 使用多个 <link> 元素
- 通过 Sass 或 Less 类似的 CSS 预处理器将多个 CSS 文件编译为一个文件
- 通过 Rails、Jekyll 或其他系统中提供过 CSS 文件合并功能
编辑器配置
将你的编辑器按照下面的配置进行设置,以避免常见的代码不一致和差异:
- 用两个空格代替制表符(soft-tab 即用空格代表 tab 符)。
- 保存文件时,删除尾部的空白符。
- 设置文件编码为 UTF-8。
- 在文件结尾添加一个空白行。
HTML编码和CSS编码会遇到的问的更多相关文章
- css编码规范
css编码规范 https://segmentfault.com/a/1190000002460968 常用样式测试工具 W3C CSS validator:http://jigsaw.w3.org/ ...
- CSS编码技巧
前面的话 本文将从DRY.currentColor.inherit和合理使用简写这几方面来详细介绍CSS编码技巧 DRY DRY,即don`t repeat yourself,尽量减少代码重复 在软件 ...
- HTML编码规范、CSS编码规范
HTML编码规范 IE 兼容模式 IE 支持通过特定的 标签来确定绘制当前页面所应该采用的 IE 版本.除非有强烈的特殊需求,否则最好是设置为 edge mode,从而通知 IE 采用其所支持的最新的 ...
- [css 揭秘]:CSS编码技巧
CSS编码技巧 我的github地址:https://github.com/FannieGirl/ifannie 喜欢的给我一个星吧 尽量减少代码重复 尽量减少改动时需要编辑的地方 当某些值相互依赖时 ...
- 【规范】前端编码规范——css 规范
编码 在 css 首行设置文件编码为 UTF-8. @charset "UTF-8"; class 命名 class 名称应当尽可能短,并且意义明确.使用有意义的名称,使用有组织的 ...
- CSS 编码中超级有用的工具集合
当你开发网站和 Web 应用时,使用合适的工具可以节省大量的时间.本文我将收集一些非常有用的 CSS 编码工具,希望对你有帮助. Pure CSS Pure 是来自雅虎的 CSS 框架,使用 Norm ...
- Bootstrap-Other:CSS编码规范
ylbtech-Bootstrap-Other:CSS编码规范 1.返回顶部 1. Bootstrap CSS编码规范 语法 用两个空格来代替制表符(tab) -- 这是唯一能保证在所有环境下获得一致 ...
- 8.Bootstrap CSS编码规范
Bootstrap CSS编码规范 本节的介绍内容为 Bootstrap 中的 CSS 编码规范. 语法 用两个空格来代替制表符(tab) -- 这是唯一能保证在所有环境下获得一致展现的方法. 为选择 ...
- 任务五:零基础HTML及CSS编码练习加强版
任务目的 针对设计稿样式进行合理的HTML架构,包括以下但不限于: 掌握常用HTML标签的含义.用法 能够基于设计稿来合理规划HTML文档结构 理解语义化,合理地使用HTML标签来构建页面 掌握基本的 ...
随机推荐
- javascript之自定义数组工具对象
<pre name="code" class="html">/* 需求:编写一个js文件,在js文件中自定义一个数组工具对象, 该工具对象要有一个找 ...
- Dynamics CRM2013 Server2012下部署ADFS和IFD遇到的问题No Organization were retrived
最近一直在折腾Windows Server2012下的IFD部署,其中各种纠结啊错误百出,要想顺利的一步到位只能说看你的RP怎么样了,具体的操作过程推荐看下勇哥的博客:http://luoyong02 ...
- Spring MVC中jsessionid所引起的问题 和解决
转自:http://blog.csdn.net/seakingwy/article/details/1933687 jsessionid所引起的问题在Spring MVC当使用RedirectV ...
- WebStorm开发工具设置React Native智能提示
最近在做React Native开发的时候,相信大家一般会使用WebStorm,Sublime,Atom等等开发工具.二之前搞前端的对WebStorm会很熟悉,WebStorm最新版是WebStorm ...
- 在Windows下搭建Gitlab服务器
一.GitLab简介 GitLab 是一个用于仓库管理系统的开源项目.使用Git作为代码管理工具,并在此基础上搭建起来的web服务. 可通过Web界面进行访问公开的或者私人项目.它拥有与Github类 ...
- 衡量android开发者水平的面试问题-android学习之旅(91)
一般面试时间短则30分钟,多则1个小时,这么点时间要全面考察一个人难度很大,需要一些技巧,这里我不局限于回答题主的问题,而是分享一下我个人关于如何做好Android技术面试的一些经验: 面试前的准备 ...
- shell脚本处理长参数的模板
shell脚本处理长参数的模板 一个shell模板,处理命令行参数,支持长短参数: #!/bin/bash # # FILE: kvm-clone-v2.sh # # DESCRIPTION: Clo ...
- RHEL6下获取安装包(RPM)而不安装的方法
RHEL6下获取安装包(RPM)而不安装的方法 有时候我们只能在某个机器上网获得RPM安装包,如何将RPM包在不能上网的内网机器安装,就需要能将安装包下载到本地而不安装,然后再把这些包复制到内网机器, ...
- 【翻译】提示18——如何决定ObjectContext的生命周期
原文地址:http://blogs.msdn.com/b/alexj/archive/2009/05/07/tip-18-how-to-decide-on-a-lifetime-for-your-ob ...
- StarUML添加自定义approach和profile
来源:fasiondog 添加Approch StarUML中的Approch也就是创建项目时的模板,其中预定义了所使用方法的模型和视图.StarUML默认Approach如下: StarUML的Ap ...