欢迎来到山村网

CSS注释的一些高级用法

2019-03-29 03:00:34浏览:547 来源:山村网   
核心摘要:  准修饰选择器(Quasi-qualified selectors)  你应当避免过分修饰选择器,例如如果你能写 .nav{} 就尽量不要写 ul.nav{}。过

  准修饰选择器(Quasi-qualified selectors)

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

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

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

  CSS Code复制内容到剪贴板

  .product-page{}

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

  其它例子如:

  CSS Code复制内容到剪贴板

  .breadcrumb{}

  .intro{}

  .image-thumbs{}

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

  代码标签

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

  CSS Code复制内容到剪贴板

  

  .nav{}

  

  .matrix{}

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

  继承标记

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

  在元素的基本样式中:

  CSS Code复制内容到剪贴板

  

  .foo{}

  在元素的拓展样式中:

  CSS Code复制内容到剪贴板

  

  .bar{}

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

(责任编辑:豆豆)
下一篇:

探讨一下移动动效设计

上一篇:

木子李:浅谈中国风格网页设计

  • 信息二维码

    手机看新闻

  • 分享到
打赏
免责声明
• 
本文仅代表作者个人观点,本站未对其内容进行核实,请读者仅做参考,如若文中涉及有违公德、触犯法律的内容,一经发现,立即删除,作者需自行承担相应责任。涉及到版权或其他问题,请及时联系我们 xfptx@outlook.com