Bootstrap CSS 编码规范之媒体查询的位置

媒体查询的位置

遵守就近原则，将媒体查询放在相关规则的附近，不要将他们打包放在一个单一样式文件中，或者放在文档底部。如果你把他们分开了，将来只会被大家遗忘。下面给出一个典型的实例：

.element { ... }
.element-avatar { ... }
.element-selected { ... }
@media (min-width: 480px) {
.element { ...}
.element-avatar { ... }
.element-selected { ... }
}
关于作者

歪脖先生，十五年以上软件开发经验，酷爱Web开发，精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等，著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》，并全部在 GitHub 上开源。

Bootstrap CSS 编码规范之媒体查询的位置相关推荐

Bootstrap CSS编码规范之代码组织规范
代码组织应该按照以下规范组织代码: 以组件为单位组织代码段. 制定一致的注释规范. 使用一致的空白符将代码分隔成块,这样利于扫描较大的文档. 如果使用了多个 CSS 文件,将其按照组件而非页面的形式 ...
Bootstrap CSS编码规范之选择器使用规范
选择器选择器应该遵守以下规范: 对于通用元素使用 class ,这样利于渲染性能的优化. 对于经常出现的组件,避免使用属性选择器(如,[class^="..."]).浏览器的性能 ...
Bootstrap CSS 编码规范之Class 命名规范
Class 命名规范 Class 应该遵守以下命名规范: class 名称中只能出现小写字符和破折号(不是下划线,也不是驼峰命名法).破折号应当用于相关 class 的命名(类似于命名空间)(如,.b ...
Bootstrap CSS 编码规范之注释
注释代码是由人编写并维护的.请确保你的代码能够自描述.注释良好,且易于他人理解.好的代码注释能够传达上下文关系和代码意图.不要简单地重复组件或 class 的名称. 对于较长的注释,务必书写完整的句 ...
Bootstrap CSS 编码规范之Less 和 Sass 中的操作符
Less 和 Sass 中的操作符为了提高可读性,在圆括号中的数学表达式的数值.变量和操作符之间,均添加一个空格. // Bad example .element { margin: 10px ...
Bootstrap CSS 编码规范之Less 和 Sass 中的嵌套
Less 和 Sass 中的嵌套避免不必要的嵌套.这是因为虽然你可以使用嵌套,但是并不意味着应该使用嵌套.只有在必须将样式限制在父元素内(也就是后代选择器),并且存在多个需要嵌套的元素的时候,才使用 ...
Bootstrap CSS 编码规范之简写形式的属性声明
简写形式的属性声明在需要显式地设置所有值的情况下,应当尽量限制使用简写形式的属性声明.常见的滥用简写属性声明的情况如下: padding margin font background border ...
Bootstrap CSS 编码规范之单行规则声明
单行规则声明对于只包含一条声明的样式,为了易读性和便于快速编辑,建议将语句放在同一行.对于带有多条声明的样式,还是应当将声明分为多行. 这样做的关键因素是为了错误检测.如,CSS 校验器指出在 18 ...
Bootstrap CSS 编码规范之带前缀的属性
带前缀的属性当使用特定厂商的带有前缀的属性时,通过缩进的方式,让每个属性的值在垂直方向对齐,这样便于多行编辑. /* Prefixed properties */ .selector { -we ...

Bootstrap CSS 编码规范之媒体查询的位置

媒体查询的位置

Bootstrap CSS 编码规范之媒体查询的位置相关推荐

最新文章

热门文章