CSS注释的一些高级用法

CSS注释的一些高级用法
准修饰选择器(Quasi-qualified selectors)

你应当避免过分修饰选择器,例如如果你能写 .nav{} 就尽量不要写 ul.nav{}。过分修饰选择器将影响性能,影响 class 复用性,增加选择器私有度。这些都是你应当竭力避免的。

不过有时你可能希望告诉其他开发者 class 的使用范围。以 .product-page 为例,这个 class 看起来像是一个根容器,可能是 html 或者 body 元素,但是仅凭 .product-page 则无法判断。

我们可以在选择器前加上准修饰(即将前面的类型选择器注释掉)来描述我们规划的 class 作用范围:

/*html*/.product-page{}

这样我们就能准确获知该 class 的作用范围而不会影响复用性。

其它例子如:

/*ol*/.breadcrumb{}

/*p*/.intro{}

/*ul*/.image-thumbs{}

这样我们就能在不影响代码私有度的前提下获知 class 作用范围。
代码标签

如果你写了一组新样式的话,可以在它上面加上标签,例如:

/**

* ^navigation ^lists

*/

.nav{}

/**

* ^grids ^lists ^tables

*/

.matrix{}

这些标签可以使得其他开发者快速找到相关代码。如果一个开发者需要查找和列表相关的部分,他只要搜索 ^lists 就能快速定位到 .nav,.matrix 以及其它相关部分。
继承标记

将面向对象的思路用于 CSS 编写的话,你经常能找到两部分 CSS 密切相关(其一为基础,其一为拓展)却分列两处。我们可以用继承标记来在原元素和继承元素之间建立紧密联系。这些在注释中的写法如下:

在元素的基本样式中:

/**

* Extend `.foo` in theme.css

*/

.foo{}

在元素的拓展样式中:

/**

* Extends `.foo` in base.css

*/

.bar{}

这样一来我们就能在两块相隔很远的代码间建立紧密联系。

参考来源:
CSS注释的一些高级用法
http://www.aichengxu.com/view/63130

时间: 2024-10-05 21:34:20

CSS注释的一些高级用法的相关文章

Python爬虫的Urllib库有哪些高级用法?

本文和大家分享的主要是python爬虫的Urllib库的高级用法相关内容,一起来看看吧,希望对大家学习python有所帮助. 1.分分钟扒一个网页下来 怎样扒网页呢?其实就是根据URL来获取它的网页信息,虽然我们在浏览器中看到的是一幅幅优美的画面,但是其实是由浏览器解释才呈现出来的,实质它 是一段HTML代码,加 JS.CSS,如果把网页比作一个人,那么HTML便是他的骨架,JS便是他的肌肉,CSS便是它的衣服.所以最重要的部分是存在于HTML中的,下面我 们就写个例子来扒一个网页下来. imp

细说 ASP.NET Cache 及其高级用法

许多做过程序性能优化的人,或者关注过程程序性能的人,应该都使用过各类缓存技术. 而我今天所说的Cache是专指ASP.NET的Cache,我们可以使用HttpRuntime.Cache访问到的那个Cache,而不是其它的缓存技术. 以前我在[我心目中的Asp.net核心对象] 这篇博客中简单地提过它,今天我打算为它写篇专题博客,专门来谈谈它,因为它实在是太重要了.在这篇博客中, 我不仅要介绍它的一些常见用法,还将介绍它的一些高级用法. 在上篇博客[在.net中读写config文件的各种方法] 的

Fiddler 高级用法:Fiddler Script 与 HTTP 断点调试

之前在<关于 WEB/HTTP 调试利器 Fiddler 的一些技巧分享>中系统的介绍过 Fiddler 的原理与一些常见技巧,但那篇文章只是入门科普,并不深入,今天要介绍到的内容相对更加高级与深入,扩展性更好,功能更加强大. 1.Fiddler Script 1.1 Fiddler Script简介 在web前端开发的过程中,fiddler是最常使用的一款调试工具.在大多数情况下,通过fiddler默认菜单的功能就可以基本满足开发者的调试需求,然而如果需要满足更复杂的调试场景时,单纯通过fi

Python爬虫入门之Urllib库的高级用法

1.设置Headers 有些网站不会同意程序直接用上面的方式进行访问,如果识别有问题,那么站点根本不会响应,所以为了完全模拟浏览器的工作,我们需要设置一些Headers 的属性. 首先,打开我们的浏览器,调试浏览器F12,我用的是Chrome,打开网络监听,示意如下,比如知乎,点登录之后,我们会发现登陆之后界面都变化了,出现一个新的界面,实质上这个页面包含了许许多多的内容,这些内容也不是一次性就加载完成的,实质上是执行了好多次请求,一般是首先请求HTML文件,然后加载JS,CSS 等等,经过多次

细说 ASP.NET Cache 及其高级用法【转】

阅读目录 开始 Cache的基本用途 Cache的定义 Cache常见用法 Cache类的特点 缓存项的过期时间 缓存项的依赖关系 - 依赖其它缓存项 缓存项的依赖关系 - 文件依赖 缓存项的移除优先级 缓存项的移除通知 巧用缓存项的移除通知 实现[延迟操作] 巧用缓存项的移除通知 实现[自动加载配置文件] 文件监视技术的选择 各种缓存方案的共存 许多做过程序性能优化的人,或者关注过程程序性能的人,应该都使用过各类缓存技术. 而我今天所说的Cache是专指ASP.NET的Cache,我们可以使用

Selenium WebDriver高级用法

Selenium GitHub地址 选择合适的WebDrvier WebDriver是一个接口,它有几种实现,分别是HtmlUnitDrvier.FirefoxDriver.InternetExplorerDriver.ChromeDriver.OperaDriver,除了 InternetExplorerDriver只能在Windows平台运行,其他WebDriver均能跨平台. 如果追求运行速度,HtmlUnitDriver是首选,但是它没有运行界面,不能实时看到运行效果.如果想看到运行效果

vim高级用法多年经验原创总结(全部测试成功)

vim高级用法多年经验原创总结(全部测试成功) ==================================================================================一. Linux→命令模式:Vim filename1.一次移动一个光标h j k l左 下 上 右2.行内移动0 到行首(d0或d^删除至行首)$ 至行尾(d$删除至行尾)0=HOME 到行首$=end 至行尾G 到文件尾50G 到50行gg 到文件首3.有小d/大D都是剪切(del 

转 Python爬虫入门四之Urllib库的高级用法

静觅 » Python爬虫入门四之Urllib库的高级用法 1.设置Headers 有些网站不会同意程序直接用上面的方式进行访问,如果识别有问题,那么站点根本不会响应,所以为了完全模拟浏览器的工作,我们需要设置一些Headers 的属性. 首先,打开我们的浏览器,调试浏览器F12,我用的是Chrome,打开网络监听,示意如下,比如知乎,点登录之后,我们会发现登陆之后界面都变化了,出现一个新的界面,实质上这个页面包含了许许多多的内容,这些内容也不是一次性就加载完成的,实质上是执行了好多次请求,一般

RecyclerView之更新UI数据的高级用法

原创文章,转载请注明 ( 来自:http://blog.csdn.net/leejizhou/article/details/51179233 李济洲的博客 ) 如果你还不了解RecyclerView如何去使用,可以参考我的前面几篇博文,再看此篇博文:) RecyclerView的使用(1)之HelloWorld RecyclerView的使用(2)之多Item布局的加载 RecyclerView的使用(3)之添加Header和Footer RecyclerView的使用(4)之下拉刷新和上拉加