## css优先级 & 设计模式 >[info] 设计模式（Design pattern）是一套被反复使用、多数人知晓的、经过分类的、代码设计经验的总结。使用设计模式是为了可重用代码、让代码更容易被他人理解、保证代码可靠性。 毫无疑问，设计模式于己于他人于系统都是多赢的；设计模式使代码编制真正工程化；设计模式是软件工程的基石脉络，如同大厦的结构一样。 　 >web开发中花在前端的时间是后端的很多倍，而前端无非就是交互和界面，这些都离不开css，所以其实除了花在js上面的时间外，还有很大一部分的时间是花在了css上了。 这里也道出了为什么前端比后端费时的原因，现在的前端已经不是以前那样简单了，后端简单的项目吃老本完全无压力，但是前端则不同了，现在是看脸的时代了，前端现在正处于更新换代，飞速发展的时代。  好了，让我们来 聊一聊css设计 模式 架构，ID，class div 规范 命名 语义 ，预处理器 前端架构…… > 印象中css具有下面这些性质，当然不一定对，只是印象中而已。 ~~~ css特性： 相同优先级的后面覆盖前面的。 如果前面优先级高，后面的也覆盖不了前面的。 生效时间不是在紧跟其后的DOM，而是整个页面加载完毕后的时间。 定义一般最好不要超过三级。 必须保证语义性强，可读性强。 层级关系合理。 优先级：ID>class>元素 定义越明确，优先级越高。 比如： path: div>p>a div p a {color: red} div a {color: #000} 链接颜色最后还是红色 其实这也与下面的 “选择器的特殊值”有关系的 3 > 2 正确理解：这个时候是选择器直接作用于同一元素上，这是优先级的问题。 ~~~ 除了“选择器的特殊值”还要注意一个问题，关联性： ``` path: div>p>span>a a { color: red; } div p span { color: #333; } 链接还是红色，说明再高“选择器的特殊值”，没有关联性也没用。必须先看关联性。关联性优先或者说关联性大于一切“选择器特殊值”。 认错：上面说错了，是自己理解错了，根本不存在什么 关联性 什么的，这是继承的问题，color是可以被继承的，上面的理解完全是错的，作用力不在它身上何来的效果呢，只是单纯的继承性问题而已。 ``` >[danger] 实际上我说的关联性是说错了，应该是 [继承](http://www.cnblogs.com/shishixiaozi/p/5730407.html) 问题。**只有选择器直接作用于同一元素时才有优先级问题，否则只是继承问题而已。** （我说的关联性其实就是下面的优先级问题） 行内定义优先级最高。 参见： [看这一篇就够了,css选择器知识汇总](https://www.w3cschool.cn/css/css-selector.html) [css样式就得这么写(css参考样式集合)](https://www.w3cschool.cn/css/css-style.html) * * * * * ### 扩展： **css设计分析** css虽然简单，甚至算不上是一门语言，随便怎么写都可以，但正因为其灵活简单，导致了在大型项目中书写规范，整体设计上存在困难，不规范，很容易造成冲突，兼容性，高耦合等问题，所以此时css被提升到设计得层面上了。 下面分析css的特点，和几钟书写的方式： ~~~ - 1. 直接根据元素写，如：div {} - 2. 根据元素属性写，如：input[type="text"]:disabled { background-color: #dddddd; } - 3. 根据类名写，如：.nav {} - 4. 根据ID写，如：#site-logo {} ~~~ 元素和类名混用，嵌套等需要注意，在一个组件中，可能是类名和元素名混用，此时需要注意了，用元素名的话就必须使用规定的元素。总之css的书写很灵活，实际中要灵活运用，很多时候运用一些语义性强的标签也会有好处，比如strong天然的表示加粗，h表示标题，p为段落，span常用内联元素，要灵活运用，结合使用才能达到最好的设计。要设计使用好不是那么简单的。 >[danger] 由于css书写灵活，它并不能算作是一门语言，但是维护一份好的样式并不容易，开发人员拥有很大的自由，写法多样，多种方式相互组合，嵌套，还有在网页中的复杂的具体情况（甚至根据书写的结构还跟html文档结构紧密相关），所以导致设计css越来越变得具有挑战性。 这是css的四种基本写法，然后还有下面几种情况： - 层级嵌套（包含上面四种写法的相互嵌套情况） - 优先级，由于css存在覆盖问题，并且优先级和覆盖问题相互关联（见上面关于优先级的讨论），所以往往情况会很复杂。 >[danger] 只要能单独拿出来使用的组件就不能有嵌套，哪怕类名长一点（用`-`分割），凡是嵌套的则一定是一个整体不可分的组件。一个组件如果拆开（样式/功能）破了不能用了，那么就是你就破坏了一个完整的组件。页面中各个组件应该可以相互组合，互不影响，标签，类名语义应该明确，越小的组件通用性越强，如表单输入框。 **页面中所有的元素都可以用组件的思维抽象出来。** 与程序开发一样css设计也分架构，可分为这几种css： - 通用初始化浏览器的css 这一般都是根据元素直接写的 - 自定义/常用css相当于类库，如: .f12, .m-t等常用的 - 皮肤，一般是用类选择器 - 常用组件，少量通用的业务逻辑组件css，比如bootstrap中的组件，表单元素，按钮 btn btn-default btn-lg 等等。 - 带有业务/逻辑属性的组件，这类组件在后台中较少，但是前台页面个性化的页面中比较多。 * * * * * >[danger] css应该尽量减少无用的嵌套，只要保证语义明确就可以了。比如header就直接写，不用写到容器里面去，不必要的css嵌套关系会使得样式和页面结构过度的耦合了，不利于css的灵活，和维护。（由于页面结构往往很复杂，但是书写css时不必固执的保持复杂冗长的嵌套结构，只需保证结构清晰简单，语义明确即可。） ### 项目CSS风格设计 每个项目/企业都有它的风格，根据风格应该从一开始立项就统一品牌风格，色调，设计，比如品牌、形象颜色，链接等，按钮等，主要色调，次要色调等。 比如天猫以前是那种深红，现在整体全部改成了浅红，还带一点粉色，这样显得更加年轻活泼，也更加突出了天猫的品牌定位“理想生活上天猫”。以前是“上天猫就购了”，深红突出的是天猫的高品质定位，而现在天猫品质定位阶段已经完成，需要转向国际化，多元化，需要突出更加年轻，大众的定位，所以品牌形象的色调也改了。 下面来规划下： - 形象风格 - 主色调：科技类偏蓝，食品类偏绿等 - 这个形象可以使用三种色调，比例为 5 : 3 : 2 - 链接颜色 - 主色调中的一种，或者靠近主色调 - 文字颜色 - 标题颜色，文字颜色，小描述浅色等等 - 按钮颜色 - 按钮颜色（包括不同状态的），文字颜色，表框颜色等等 - 背景颜色 - 大块的纯白色，浅色的文字背景等等 …… 更多的组件细节 >[danger] 其实这些并不多，也不麻烦，这样设计的好处是整体有一个规范，后面的工作不会偏离项目整体的风格，能很好的体现出设计的灵魂，是的整体协调。 * * * * * ### 思考  >[danger] 由于css的[优先级](http://www.nowamagic.net/csszone/css_SeletorPriorityRules.php)，[继承](http://www.cnblogs.com/shishixiaozi/p/5730407.html)，覆盖的天然特性，如果没有组织的去写，“东一西一榔头”最后都是破天窗的漏洞污染，而利用层级关系，去组织结构就相当于命名空间了，这样就不会出现属性被污染的情况，但是这样的弊端就是嵌套过深，或者难以把控层级关系和结构，维护麻烦，并且不利于重用，所以重用和灵活性是个矛盾体，css太过灵活，把握好这个度不是件容易的事。 一般来说，属性命名方法更好复用，一般局用通用性，语义性命名业务逻辑成分较重，可能每个页面都不一样，还有一类有时可能加上位置等，logo-r这样的，其实位置算是属性，因为不是没有业务成分，所以这是二者的结合使用。不管什么时候，起一个好的名字还真是不容易啊，尤其在css设计这里，关系到很多问题，从css里面基本能够看出页面的结构，并且大规模网站还要考虑更多的架构等问题，css也是需要架构的。 * * * * * ### 参考资料： - [抽象与具体](http://www.kancloud.cn/xiak/php-node/247193) - [CSS 元素选择器](http://www.w3school.com.cn/css/css_selector_type.asp) - [HTML DIV+CSS 命名规范大全？](https://www.zhihu.com/question/38773260) - [DIV+CSS规范命名大全集合](http://www.divcss5.com/jiqiao/j4.shtml) - [知识点滴 Div+CSS命名规范大全](http://blog.csdn.net/BaiHuaXiu123/article/details/52714374) - [网站命名规范大全CSS规范38](http://3y.uu456.com/bp_4ps6616qc94yj364r8wo_1.html) - [规范 - NEC : 更好的CSS样式解决方案](http://nec.netease.com/standard) - [CSS规范 - 命名规则--（来自网易）](http://www.cnblogs.com/LoveOrHate/p/4448704.html) - [程序员英语单词册](http://www.kancloud.cn/haixu926611/study-english) - [如何规范 CSS 的命名和书写？](https://www.zhihu.com/question/19586885) - [前端人员必看CSS命名规范](https://www.douban.com/note/499976405/?type=like) - [Div+CSS命名规范（前端web开发命名规范） - lephy的个人页面](https://my.oschina.net/leipeng/blog/215563) - [作为前端，应该知道的CSS命名规范](http://www.tuicool.com/articles/MbQ3qeV) - [常用html、CSS、javascript前端命名规范 - youfeng - 博客园](http://www.cnblogs.com/youfeng365/p/5846683.html) - [class命名规范](http://www.qdfuns.com/notes/30263/96678d9e13659a087f502ef044be839c.html) - [前端CSS命名规范大全](http://www.360doc.com/content/15/0519/08/10504424_471619710.shtml) - [前端小知识点--class命名规范](http://www.jianshu.com/p/eebed7f038bc) - [CSS样式怎样命名才规范，css命名规则大全](http://jingyan.baidu.com/article/a3aad71ac77985b1fb00960f.html) - [命名 CSS 的类或 id 时单词间如何连接？](https://www.zhihu.com/question/19748433) - [网页制作web前端工程师入门须知【新手必看】](https://www.douban.com/group/topic/90672880/) - [Css选择器命名规则](https://www.qianduan.net/css-selectors-naming-2/) - [CSS 中 id 与 class 命名规则及编码的 6 个最佳习惯](http://blog.csdn.net/holmes89757/article/details/51701120) - [没那么难，谈CSS的设计模式](http://kb.cnblogs.com/page/551422/) * * * * * - [CSS选择器的权重与优先规则](http://www.nowamagic.net/csszone/css_SeletorPriorityRules.php)  **讨论选择器的权重时不要忘记考虑浏览器自身的默认样式表也有权重哦：**  可见浏览器默认的样式权重是： ``` a:-webkit-any-link { color: -webkit-link; text-decoration: underline; cursor: auto; } 其实就相当于 a{} ``` 而上面已经说过 关联性优先 的原则。 ``` .div .p .a { color: #333; } .div .a { color: #000; } ``` **只有关联性一致时才可以谈 选择器的权重。** >[danger] 实际上我说的关联性是说错了，应该是 [继承](http://www.cnblogs.com/shishixiaozi/p/5730407.html) 问题。 * * * * * <span style="color:red">**CSS媒体查询并没有什么优先级，它没有任何特殊性，照常遵循普通的同级覆盖原则，所以一般自适应代码都放在最后。**</span> * * * * * - [CSS中为什么overflow:hidden能清除浮动(float)的影响？原理是什么？](https://www.zhihu.com/question/30938856) - [精简高效的CSS命名准则/方法](http://www.zhangxinxu.com/wordpress/2010/09/精简高效的css命名准则方法/) - [我是如何对网站CSS进行架构的](http://www.zhangxinxu.com/wordpress/2010/07/我是如何对网站css进行架构的/) - [面向属性的CSS命名](http://www.cnblogs.com/lyzg/p/5561001.html) - [css中属性值继承小解](http://www.cnblogs.com/shishixiaozi/p/5730407.html) > 表述不够准确，应当是默认没有自动继承的属性，因为也可以自定义属性为继承。所以并不是某些属性不能被继承，而是默认不会被自动继承，只不过有一些属性是默认自动继承的而已。其实这和元素的属性缺省值有关，与其说自动继承，不如说是元素的该属性的默认缺省值为 继承，而那些默认没有自动继承的属性的缺省值 不为 继承，而是为 最初。可见属性的缺省值并不都是相同的，对于这点想必很多人一直都没有意识到。 > > 不是不能继承，而是这些属性的默认缺失值不为 `inherit` ，但还是可以设置为 `inherit` 的 > > 最初的 initial、继承 inherit、默认值（缺省值） 三者具有不同的意义。 - [如何看待 CSS 中 BEM 的命名方式？](https://www.zhihu.com/question/21935157) - [如何理解 Web 语义化？](https://www.zhihu.com/question/20455165) - [前端人员必看CSS命名规范](https://www.douban.com/note/499976405/?type=like) - [HTML DIV+CSS 命名规范大全？](https://www.zhihu.com/question/38773260) - [HTML标签全称对照](https://www.toutiao.com/i6452118053206360590/) - [HTML编码规范 - (WEB前端命名规范)](http://blog.csdn.net/dong_pt/article/details/50948033) - [什么鬼，又不知道怎么命名class了](http://www.w3cplus.com/css/css-class-name.html) - [全栈 - 20 Web 基础 网页的血肉 CSS](https://juejin.im/post/58c7a09444d904006809b213) - [如何编写高效的 CSS 选择符](http://hejx.space/2017/04/24/高效CSS选择器/) - [如何理解 CSS 类名语义化？](https://www.zhihu.com/question/21943416) - [一劳永逸的搞定 flex 布局 - 掘金](https://juejin.im/post/58e3a5a0a0bb9f0069fc16bb) - [CSS in JS 简介](http://www.ruanyifeng.com/blog/2017/04/css_in_js.html) - [OOCSS——概念篇_OOCSS 教程_w3cplus](http://www.w3cplus.com/css/oocss-concept) - [px、dp、dip、dpi、sp 等到底有什么联系区别？产生的根源和设计时的影响如何？是否屏幕密度的决定原因？](https://www.zhihu.com/question/19625584) - [整理CSSStyleSheet相关的属性 - web前端学习笔记 - SegmentFault](https://segmentfault.com/a/1190000004355197?_ea=580742) [前端设计，不得不知的CSS优先级及我们的建议](https://www.toutiao.com/a6453772040796111373/?tt_from=weixin&utm_campaign=client_share&app=news_article&utm_source=weixin&iid=12619555732&utm_medium=toutiao_android&wxshare_count=1) [css优先级计算规则 - wangmeijian - 博客园](http://www.cnblogs.com/wangmeijian/p/4207433.html#tt_daymode=1) [Vue: scoped 样式与 CSS Module 对比](https://mp.weixin.qq.com/s/FoDei2gy0Mtqy608FOxGwQ) ***** update time: 2017-12-1 02:00:12