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 就必须跟著重构,造成维护上多余的成本。若从这个例子来考量,原则上 都一定会接在

  • 标签的后面,一个
  • 只会有一个 ,通常不会独立存在,那就可以写成 .nav–main a {},会是比较好的写法,甚至是直接给 加上 class nav–main_item。后者是 OOCSS 所提倡的用法。
  • 这样的写法,一来效能理论上比较好(我没办法验证),二来层次比较单纯。
    增加 CSS class 的重复使用在 OOCSS 的观念中,强调重复使用 class,而应该避免使用 id 作为 CSS 的选择器。这种想法就是像
    OOP
    尽量抽离重复的程式码,例如以下这个例子,这是两种按钮的 CSS 样式属性:
    CSS Code复制内容到剪贴板.button{ display:inlineblock; padding:6px12px; 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复制内容到剪贴板“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设计模式是什么”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注百云主机网站,小编会继续努力为大家带来更多实用的文章!

    相关推荐: CSS3盒阴影与边界图片怎么设置

    这篇文章主要介绍“CSS3盒阴影与边界图片怎么设置”,在日常操作中,相信很多人在CSS3盒阴影与边界图片怎么设置问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”CSS3盒阴影与边界图片怎么设置”的疑惑有所帮助!接下来,请跟着小编一…

    免责声明:本站发布的图片视频文字,以转载和分享为主,文章观点不代表本站立场,本站不承担相关法律责任;如果涉及侵权请联系邮箱:360163164@qq.com举报,并提供相关证据,经查实将立刻删除涉嫌侵权内容。

    (0)
    打赏 微信扫一扫 微信扫一扫
    上一篇 01/10 12:42
    下一篇 01/10 12:42

    相关推荐