摘要:由于缺少命名空间,所有的都是全局的,所以大团队项目如果没有良好的命名规范,会容易失控。所以尽量避免标签定义样式。全称相对于前种方案,命名比较冗长,但这正是保证类名不会重复的途径,是的核心思想。
CSS由于缺少命名空间,所有的class都是全局的,所以大团队项目如果没有良好的命名规范,会容易失控。
举例实现以下效果:
.pageButtons { display: flex; justify-content: center; } .pageButtons button{ width: 80px; height: 30px; margin: 5px; border-radius: 4px; border: none; font-size:13px; cursor: pointer; outline: none; } .primary-button { color: white; background-color: rgba(200,0,0,.9); transition: background-color 1s,font-weight 1s; } .primary-button:hover { font-weight: 700; background-color: rgba(255,0,0,1); }
想象下,把此页面(或者做成组件)嵌入到另外一个页面,而它也以button 标签定义了button的样式,会造成非我们期望的button样式。所以尽量避免标签定义样式。还有一个问题是,.primary-button看似是一个普通的类,也有可能在别的地方定义,所以维护会比较困难。
通过 OOCSS + BEM实现OOCSS就是通过选择符重用CSS类。BEM全称Block-name__element--modifier.
.pageButtons { display: flex; justify-content: center; } .pageButtons__prev, .pageButtons__next, .pageButtons__next--primary { width: 80px; height: 30px; margin: 5px; border-radius: 4px; border: none; font-size:13px; cursor: pointer; outline: none; } .pageButtons__next--primary { color: white; background-color: rgba(200,0,0,.9); transition: background-color 1s,font-weight 1s; } .pageButtons__next--primary:hover { font-weight: 700; background-color: rgba(255,0,0,1); }
相对于前种方案,BEM命名比较冗长,但这正是保证CSS类名不会重复的途径,是BEM的核心思想。
通过OOSCSS如果用SASS写:
%button { width: 80px; height: 30px; margin: 5px; border-radius: 4px; border: none; font-size:13px; cursor: pointer; outline: none; } %primaryState { color: white; background-color: rgba(200,0,0,.9); transition: background-color 1s,font-weight 1s; } %hoverState { font-weight: 700; background-color: rgba(255,0,0,1); } .pageButtons { display: flex; justify-content: center; &__prev, &__next, &__next--primary { @extend %button; } &__next--primary { @extend %primaryState; } &__next--primary:hover { @extend %hoverState; } }
这里稍提下%placeHolder 和 @mixin,如果不用传人参数,用%placeHoder,这样可以以选择符重用类,相对于@mixin复制代码,减少了代码体积。
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/112366.html
摘要:由于缺少命名空间,所有的都是全局的,所以大团队项目如果没有良好的命名规范,会容易失控。所以尽量避免标签定义样式。全称相对于前种方案,命名比较冗长,但这正是保证类名不会重复的途径,是的核心思想。 CSS由于缺少命名空间,所有的class都是全局的,所以大团队项目如果没有良好的命名规范,会容易失控。 举例实现以下效果:showImg(https://segmentfault.com/img...
摘要:这个方法论在内容和容器之间有着明显的区分。这是通过把命名为表示其角色的类名。通过使用这种扁平的命名方式避免了多后代的选择器。 原文链接:A Look at Some CSS methodologies CSS在大型,复杂,快速迭代的系统中难以管理的程度是出了名的。 其中一个原因是CSS缺少内置的作用域管理机制。在CSS中,所有的一切都是全局的,这意味着任何你所做的改变都有可能层叠或者改...
摘要:这个方法论在内容和容器之间有着明显的区分。这是通过把命名为表示其角色的类名。通过使用这种扁平的命名方式避免了多后代的选择器。 原文链接:A Look at Some CSS methodologies CSS在大型,复杂,快速迭代的系统中难以管理的程度是出了名的。 其中一个原因是CSS缺少内置的作用域管理机制。在CSS中,所有的一切都是全局的,这意味着任何你所做的改变都有可能层叠或者改...
摘要:和出于以下原因,我们鼓励使用和的某种组合可以帮助我们理清和之间清晰且严谨的关系。可以帮助我们创建出可扩展的样式表。参考资料的的,也就是,是一种用于和类名的命名约定。 OOCSS 和 BEM 出于以下原因,我们鼓励使用 OOCSS 和 BEM 的某种组合: 可以帮助我们理清 CSS 和 HTML 之间清晰且严谨的关系。 可以帮助我们创建出可重用、易装配的组件。 可以减少嵌套,降低特定性...
阅读 1762·2023-04-26 00:47
阅读 1519·2021-11-11 16:55
阅读 2498·2021-09-27 14:04
阅读 3528·2021-09-22 15:58
阅读 3520·2021-07-26 23:38
阅读 2078·2019-08-30 13:47
阅读 1932·2019-08-30 13:15
阅读 1110·2019-08-29 17:09