CSS的OOCSS和SMACSS设计模式是什么

这篇文章主要介绍“CSS的OOCSS和SMACSS设计模式是什么”，在日常操作中，相信很多人在CSS的OOCSS和SMACSS设计模式是什么问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”CSS的OOCSS和SMACSS设计模式是什么”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！OOCSSOOCSS不是什么新技术，只是一种撰写 CSS 的设计模式，或者可以说是一种「道德规范」，大致上我觉得重点只有两个： 减少对 HTML 结构的依赖
增加 CSS class 重复性的使用减少对 HTML 结构的依赖
CSS Code复制内容到剪贴板

一般的导航栏写法，结构应该会像上面的 HTML 范例一样，如果要对那些 标签定义样式，CSS 的写法可能写成.nav–main ul li a {}，这种写法先不管效能上的问题，可以看出来过度地依赖元素标签的结构，有可能之后 HTML 结构改变，这个 CSS 就必须跟著重构，造成维护上多余的成本。若从这个例子来考量，原则上 都一定会接在

这样的写法，一来效能理论上比较好（我没办法验证），二来层次比较单纯。
增加 CSS class 的重复使用在 OOCSS 的观念中，强调重复使用 class，而应该避免使用 id 作为 CSS 的选择器。这种想法就是像
OOP
尽量抽离重复的程式码，例如以下这个例子，这是两种按钮的 CSS 样式属性：
CSS Code复制内容到剪贴板.button{ display:inline–block; padding:6px12px; color:hsla(0,100%,100%,1); &amp免费云主机、域名;.button-default{background:hsla(180,1%,28%,1);} &.button-primary{background:hsla(208,56%,53%,1);} }上面的 CSS 将两种不同样式的 button，抽离出重复的部份，并且定义在同个 class
上。因此，要使用这样的样式，HTML 的写法可能长这个样子：
CSS Code复制内容到剪贴板“buttonbutton-default”> “buttonbutton-primary”>先用 button 宣告此为一个按钮的样式，再用 button-default 或 button-primary 作为按钮底色的区别。这么做可以维护成本变得比较低，例如：想要改网站上所有按钮的大小，就只要修改 .button 的 padding 而已。
SMACSS我对 SMACSS 的理解还不是很深入，或许把Scalable and Modular Architecture for CSS看完后会有更深一曾的理解。目前对 SMACSS 的概念仅限于它对 CSS 不同的业务逻辑所做的划分方式：但我认为原本的设计不是很妥当，因此我自己做了一些改良：
BaseBase 就是设定标签元素的预设值，例如浏览器的 reset 可以写在这里，如果用的是 Compass，只要 @include global-reset 即可。这里只会对标签元素本身做设定，不会出现任何 class 或
id，但是可以有属性选择器或是伪类：
CSS Code复制内容到剪贴板html{} input[type=text]{} a:hover{} 到此，关于“CSS的OOCSS和SMACSS设计模式是什么”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注云技术网站，小编会继续努力为大家带来更多实用的文章！

相关推荐: HITP代理的知识点有哪些

这篇文章主要介绍“HITP代理的知识点有哪些”，在日常操作中，相信很多人在HITP代理的知识点有哪些问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”HITP代理的知识点有哪些”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！百度百…