欢迎访问湖北成人高考报名,更多超值体验尽在无忧助学网!

IT培训

免费咨询电话027-59239395
 
您的位置:湖北成人高考报名 > 武汉PHP培训 > 武汉PHP培训IT知识 > CSS前端UI设计技巧之如何编写高效的CSS选择符?

CSS前端UI设计技巧之如何编写高效的CSS选择符?

发布时间:2017-11-16 15:27:22浏览数:1403次来源:

我们学习前端UI框架设计时对CSS前端UI设计技巧非常重视,最初写CSS的时候,觉得很简单,写得天马行空。


后来慢慢的发现,没有规则的瞎写,虽然也能实现效果,但是在实际开发中可能会多做无用功或是重复做功,并且CSS并不高效。


于是后期就特意按照一定的规则,尽可能的写出高效的,可复用的CSS。那么,CSS前端UI设计技巧中如何编写高效的css选择符呢?


编写高效的CSS选择符有以下常用规则:

CSS前端UI设计技巧一、避免使用通配规则

除了传统意义上的通配选择符之外,我们把相邻兄弟选择符、子选择符、后代选择符合属性选择符都归纳到通配规则分类下,推荐仅使用 ID、类和标签选择符。


CSS前端UI设计技巧二、不要限定 ID 选择符

在页面中一个指定的ID只能对应一个元素,所以没有必要添加额外的限定符。例如,div#header是没有必要的,应该简化为#header


CSS前端UI设计技巧三、不要限定类选择符

不要用具体的标签限定类选择符,而是根据实际情况对类名进行扩展。例如,把li.chapter改成.li-chapter,或是.list-chapter更好。


CSS前端UI设计技巧四、让规则越具体越好

不要试图编写像 ol li a 这样的长选择符,最好是创建一个像.list-anchor一样的类,并把它添加到适当的元素上。


CSS前端UI设计技巧五、避免使用后代选择符

通常处理后代选择符的开销时最高的,而使用子选择符也可以得到想要的结果,并且更加高效。


CSS前端UI设计技巧六、避免使用标签—子选择符

如果有像#menus > li > a这样的基于标签的子选择符,那么应该使用一个类来关联每个标签元素,例如.menus-item


CSS前端UI设计技巧七、质疑子选择符的所有用途

检查所有使用子选择符的地方,然后尽可能用具体的类取代它们。


CSS前端UI设计技巧八、依靠继承

了解哪些属性可以通过继承而来,然后避免对这些属性重复指定规则。例如,对列表元素而不是每个列表元素指定list-style-image。请参考继承属性的列表来了解每个元素的可继承的属性。


总结:在日常编码工作中,牢记并且按照以上8项规则执行,日积月累,一定可以写出高效的CSS选择符。

本文编辑来源:武汉PHP培训
继续浏览有关武汉PHP培训的文章
湖北成考网微信二维码
扫一扫获取最新成考信息

关注武汉PHP培训微信公众号:m_51grant_com ,专业PHP培训信息网

扫描左侧“微信二维码”即可第一时间通过手机获取最新“武汉PHP培训”重要学习信息及资料。

咨询QQ:2097117734

电话:027-59239395 手机同微信:18771136633

无忧助学名师免费一对一量身定制服务!
为什么要告诉武汉PHP培训?
  • 10万多学员的选择
  • 价格更低 额外礼品
  • 跟踪服务 解决问题