CSS注解的1些高級用法

日期:2021-03-05 类型:科技新闻 

关键词:html网页制作,php网页制作,网页设计稿,网页编辑工具,学生网页设计模板

准装饰挑选器(Quasi-qualified selectors)

你理应防止太过装饰挑选器,比如假如你能写 .nav{} 就尽可能不必写 ul.nav{}。太过装饰挑选器将危害特性,危害 class 复用性,提升挑选器独享度。这些全是你理应不遗余力防止的。

但是有时你将会期待告知别的开发设计者 class 的应用范畴。以 .product-page 为例,这个 class 看起来好像1个根器皿,将会是 html 或 body 元素,可是仅凭 .product-page 则没法分辨。

大家能够在挑选器前再加准装饰(将要前面的种类挑选器注解掉)来叙述大家整体规划的 class 功效范畴:

CSS Code拷贝內容到剪贴板
  1. /*html*/.product-page{}  

这样大家就可以精确得知该 class 的功效范畴而不容易危害复用性。

其它事例如:

CSS Code拷贝內容到剪贴板
  1. /*ol*/.breadcrumb{}   
  2. /*p*/.intro{}   
  3. /*ul*/.image-thumbs{}  

这样大家就可以在不危害编码独享度的前提条件下得知 class 功效范畴。
编码标识

假如你写了1组新款式的话,能够在它上面再加标识,比如:

CSS Code拷贝內容到剪贴板
  1. /**  
  2.  * ^navigation ^lists  
  3.  */  
  4. .nav{}   
  5.   
  6. /**  
  7.  * ^grids ^lists ^tables  
  8.  */  
  9. .matrix{}  

这些标识可使得别的开发设计者迅速寻找有关编码。假如1个开发设计者必须搜索和目录有关的一部分,他要是检索 ^lists 就可以迅速精准定位到 .nav,.matrix 和其它有关一部分。
承继标识

将朝向目标的思路用于 CSS 撰写的话,你常常能寻找两一部分 CSS 紧密有关(其1为基本,其1为扩展)却分列两处。大家能够用承继标识来在原元素和承继元素之间创建密不可分联络。这些在注解中的写法以下:

在元素的基础款式中:

CSS Code拷贝內容到剪贴板
  1. /**  
  2.  * Extend `.foo` in theme.css  
  3.  */  
  4.  .foo{}  

在元素的扩展款式中:

CSS Code拷贝內容到剪贴板
  1. /**  
  2.  * Extends `.foo` in base.css  
  3.  */  
  4.  .bar{}  

这样1来大家就可以在两块相隔很远的编码间创建密不可分联络。