CSS中的层分离编程详解

2020-05-05 07:36:04易采站长站整理

    Tools?—?Default mixins & functions
    Generic?—?Normalize, resets, box-sizing
    Base?—?HTML elements
    Objects?—?Design patterns
    Components?—?Modules & blocks of code
    Trumps?—?Helpers & overrides

每个层次增加的权重,只允许添加额外的要求。

以上面同样的例子,CSS将会被划分为基础层和组件层。

CSS Code复制内容到剪贴板

p {   
    font-family: ‘Helvetica Neue’, Helvetica, Arial, sans-serif;   
    font-size: 14px;   
}   
.product-details__title {   
    color: #333;   
}   
.latest-news__title {   
    color: #FF0000;   
}  

使用前请注意

你仅仅是可以决定使用上述策略之一,但是你不是全部都得靠它。如果某一层次并不适合你的项目那么就不要使用它了。你也可以改变或者增加一些东西来使得它适应你的项目和团队的需求。命名规则或者方法并不是每个时候都能100%的适合所有项目。

你也可以创建你自己的方法或者命名规则,允许一个量身定制的解决方案来完美的适应你项目的需求。定制解决方案的一个不足之处就是缺乏社区的支持和文档。