CSS规范 - 典型错误--(来自网易)
不符合NEC规范的选择器用法
.class{}
不要以一个没有类别的样式作为主选择器,这样的选择器只能作为后代选择器使用,比如.m-xxx .class{}。
.m-xxx div{}
不要以没有语义的标签作为选择器,这会造成大面积污染,除非你可以断定现在或将来你的这个选择器不会污染其他同类。
.g-xxx .class{}
不要在页面布局中使用后代选择器,因为这个后代选择器可能会污染里面的元素。
.g-xxx .m-yyy{}.g-xxx .u-yyy{}
不要用布局去控制模块或元件,模块和元件应与布局分离独立。
.m-xxx .f-xxx{}.m-xxx .s-xxx{}
不要通过模块或其他类来重定义或修改或添加已经定义好的功能类选择器和皮肤类选择器。
.m-xxx .class .class .class .class{}
不要将选择器写的过于冗长,这会额外增加文件大小并且限制了太小范围的选择器,使树形结构过于严格应用范围过于局限,建议3-4个长度之内写完。
选择器并不需要完整反映结构嵌套顺序,相反,能简则简。
.m-xxx .m-yyy .zzz{}
不要越级控制,如果.zzz是.m-yyy的后代选择器,那么不允许.m-yyy之外的选择器控制或修改.zzz。
此时可以使用.m-yyy的扩展来修改.zzz,比如.m-yyy-1 .zzz{}。
扩展类使用错误
扩展类必须和其基类同时使用于同一个节点。
错误:class="g-xxx g-yyy-1" class="m-xxx-1" class="u-xxx u-yyy-1" class="xxx-yyy"。
正确:class="g-xxx g-xxx-1" class="m-xxx m-xxx-1" class="u-yyy u-yyy-1" class="xxx xxx-yyy"。
CSS规范 - 典型错误--(来自网易)的更多相关文章
- NEC css规范
CSS规范 - 分类方法 SS文件的分类和引用顺序 通常,一个项目我们只引用一个CSS,但是对于较大的项目,我们需要把CSS文件进行分类. 我们按照CSS的性质和用途,将CSS文件分成“公共型样式”. ...
- CSS规范 - 优化方案--(来自网易)
值缩写 缩写值可以减少CSS文件大小,并增加可读性和可维护性. 但并非所有的值都必须缩写,因为当一个属性的值缩写时,总是会将所有项都设置一遍,而有时候我们不希望设置值里的某些项. /* 比如我们用下面 ...
- CSS function--(来自网易)
/* function */ .f-cb:after,.f-cbli li:after{;overflow:hidden;content:".";} .f-cb,.f-cbli l ...
- 常用样式制作思路 自定义按钮~自适应布局~常见bug seajs简记 初学者必知的HTML规范 不容忽略的——CSS规范
常用样式制作思路 学习常用样式总结参考来自这里 带点文字链接列表利用:before实现 1 <!DOCTYPE html> 2 <html lang="en" ...
- Atitit.css 规范 bem 项目中 CSS 的组织和管理
Atitit.css 规范 bem 项目中 CSS 的组织和管理 1. 什么是BEM?1 1.1. 块(Block)2 1.2. 元素(Element)2 1.3. BEM树(和DOM树类似).3 ...
- 前端开发规范:命名规范、html 规范、css 规范、js 规范
上周小组的培训内容是代码可读性艺术,主要分享如何命名.如何优化代码排版,如何写好的注释.我们都知道写出优雅的代码是成为大牛的必经之路. 下面感谢一位前端开发小伙伴总结的前端开发规范,通过学习相关开发规 ...
- CSS规范 - 分类方法
CSS文件的分类和引用顺序 通常,一个项目我们只引用一个CSS,但是对于较大的项目,我们需要把CSS文件进行分类. 我们按照CSS的性质和用途,将CSS文件分成“公共型样式”.“特殊型样式”.“皮肤型 ...
- 前端开发规范:命名规范、HTML 规范、CSS 规范、JavaScript 规范
一个好的程序员肯定是要能书写可维护的代码,而不是一次性的代码,怎么能让团队当中其他人甚至一段时间时候你再看你某个时候写的代码也能看懂呢,这就需要规范你的代码了.我是有一点强迫症的人,上周我们后端给我了 ...
- #Google HTML&CSS规范指南
Google HTML&CSS规范指南 翻译自原文 目录 Google HTML&CSS规范指南 1. 背景 2. 通用 2.1 通用样式规则 2.1.1 协议 2.2 通用格式规则 ...
随机推荐
- 给Android Studio 设置背景图片
初用Android Studio的我 看见这么帅的事情,肯定自己要设置试试(又可以边看女神边打代码了,想想都刺激)由于这不是AS的原始功能所以需要下载插件 先看看效果图吧: 1.下载插件 Sexy E ...
- TKmath Package gp数据类型
点,向量,方向 二维:gp_Pnt2d, gp_Vec2d, gp_Dir2d:它们的内部都存储 gp_XY 三维:gp_Pnt, gp_Vec, gp_Dir:它们的内部都存储 gp_XYZ 轴向与 ...
- 【SE】Week2 : 个人博客作业
1. 是否需要有代码规范 对于是否需要有代码规范,请考虑下列论点并反驳/支持: Statement1 : 这些规范都是官僚制度下产生的浪费大家的编程时间.影响人们开发效率, 浪费时间的东西. 这样的 ...
- 20135337朱荟潼 Linux第五周学习总结——扒开系统调用的三层皮(下)
朱荟潼 + 原创作品转载请注明出处 + <Linux内核分析>MOOC课http://mooc.study.163.com/course/USTC 1000029000 一.学习内容 (一 ...
- ElasticSearch 2 (17) - 深入搜索系列之部分匹配
ElasticSearch 2 (17) - 深入搜索系列之部分匹配 摘要 到目前为止,我们介绍的所有查询都是基于完整术语的,为了匹配,最小的单元为单个术语,我们只能查找反向索引中存在的术语. 但是, ...
- week3 团队博客作业
团队自我介绍地址: http://www.cnblogs.com/liuliudashun/p/5919555.html
- 『编程题全队』Alpha 阶段冲刺博客Day5
1.每日站立式会议 1.会议照片 2.昨天已完成的工作统计 孙志威: 1.完成SlotWidget的设计和功能 2.修改了TitleBar上的功能按钮的CSS样式表 孙慧君: 1.登录框的UI设计 2 ...
- 使用alpine的docker镜像下 dind 的方式安装dotnet core 的一个非dockerfile的方法
1. 下载dind的镜像 docker pull docker:dind 2. 执行该镜像 docker run -it --privileged --name some-docker -d dock ...
- day5——Java 实现导出excel表 POI(转)
1.首先下载poi-3.6-20091214.jar,下载地址如下: http://download.csdn.net/detail/evangel_z/3895051 2.Student.java ...
- mybatis 注解和xml 优缺点
xml: 增加了xml文件,修改麻烦,条件不确定(ifelse判断),容易出错,特殊转义字符比如大于小于 注释: 复杂sql不好用,搜集sql不方便,管理不方便,修改需重新编译 #和$区别: 相同 都 ...