这篇文章主要介绍“CSS的OOCSS和SMACSS设计模式是什么”,在日常操作中,相信很多人在CSS的OOCSS和SMACSS设计模式是什么问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”CSS的OOCSS和SMACSS设计模式是什么”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!
创新互联公司拥有一支富有激情的企业网站制作团队,在互联网网站建设行业深耕10余年,专业且经验丰富。10余年网站优化营销经验,我们已为千余家中小企业提供了做网站、成都网站制作解决方案,按需定制网站,设计满意,售后服务无忧。所有客户皆提供一年免费网站维护!
OOCSS
OOCSS 不是什么新技术,只是一种撰写 CSS 的设计模式,或者可以说是一种「道德规范」,大致上我觉得重点只有两个:
减少对 HTML 结构的依赖
增加 CSS class 重复性的使用
减少对 HTML 结构的依赖
CSS Code复制内容到剪贴板
<nav class="nav--main">
<ul>
<li><a>.........</a></li>
<li><a>.........</a></li>
<li><a>.........</a></li>
</ul>
</nav>
一般的导航栏写法,结构应该会像上面的 HTML 范例一样,如果要对那些 <a> 标签定义样式,CSS 的写法可能写成.nav--main ul li a {},这种写法先不管效能上的问题,可以看出来过度地依赖元素标签的结构,有可能之后 HTML 结构改变,这个 CSS 就必须跟著重构,造成维护上多余的成本。
若从这个例子来考量,原则上 <a> 都一定会接在 <li> 标签的后面,一个 <li> 只会有一个 <a>,通常不会独立存在,那就可以写成 .nav--main a {},会是比较好的写法,甚至是直接给 <a> 加上 class nav--main_item。后者是 OOCSS 所提倡的用法。
这样的写法,一来效能理论上比较好(我没办法验证),二来层次比较单纯。
增加 CSS class 的重复使用
在 OOCSS 的观念中,强调重复使用 class,而应该避免使用 id 作为 CSS 的选择器。这种想法就是像
OOP
尽量抽离重复的程式码,例如以下这个例子,这是两种按钮的 CSS 样式属性:
CSS Code复制内容到剪贴板
.button {
display: inline-block;
padding: 6px 12px;
color: hsla(0, 100%, 100%, 1);
&.button-default { background: hsla(180, 1%, 28%, 1); }
&.button-primary { background: hsla(208, 56%, 53%, 1); }
}
上面的 CSS 将两种不同样式的 button,抽离出重复的部份,并且定义在同个 class
上。因此,要使用这样的样式,HTML 的写法可能长这个样子:
CSS Code复制内容到剪贴板
<a class="button button-default">
<a class="button button-primary">
先用 button 宣告此为一个按钮的样式,再用 button-default 或 button-primary 作为按钮底色的区别。这么做可以维护成本变得比较低,例如:想要改网站上所有按钮的大小,就只要修改 .button 的 padding 而已。
SMACSS
我对 SMACSS 的理解还不是很深入,或许把 Scalable and Modular Architecture for CSS 看完后会有更深一曾的理解。目前对 SMACSS 的概念仅限于它对 CSS 不同的业务逻辑所做的划分方式:
但我认为原本的设计不是很妥当,因此我自己做了一些改良:
Base
Base 就是设定标签元素的预设值,例如浏览器的 reset 可以写在这里,如果用的是 Compass,只要 @include global-reset 即可。这里只会对标签元素本身做设定,不会出现任何 class 或
id,但是可以有属性选择器或是伪类:
CSS Code复制内容到剪贴板
html {}
input[type=text] {}
a:hover {}
到此,关于“CSS的OOCSS和SMACSS设计模式是什么”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注创新互联网站,小编会继续努力为大家带来更多实用的文章!
网站标题:CSS的OOCSS和SMACSS设计模式是什么
分享路径:https://www.cdcxhl.com/article10/pododo.html
成都网站建设公司_创新互联,为您提供品牌网站设计、网站设计、品牌网站制作、关键词优化、企业网站制作、电子商务
声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联