CSS编写规范

2018-06-24 01:36:12来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

一、面向对象CSS(OOCSSS)

OOCSS规则一:结构和皮肤分离

如.btn , .btn-info ,.btn-warning

.btn {
                display: inline-block;
                margin-bottom: 0;
                font-weight: normal;
                text-align: center;
                vertical-align: middle;
                -ms-touch-action: manipulation;
                touch-action: manipulation;
                cursor: pointer;
                background-image: none;
                border: 1px solid transparent;
                white-space: nowrap;
                padding: 6px 12px;
                font-size: 14px;
                line-height: 1.42857143;
                border-radius: 4px;
                -webkit-user-select: none;
                -moz-user-select: none;
                -ms-user-select: none;
                user-select: none;
            }
            
            .btn-info {
                color: #ffffff;
                background-color: #5bc0de;
                border-color: #46b8da;
            }
            
            .btn-warning {
                color: #ffffff;
                background-color: #f0ad4e;
                border-color: #eea236;
            }

OOCSS规则二:容器和内容分离(不推荐

.header .btn{
                display: inline-block;
                margin-bottom: 0;
            }

 

二、单一职责原则

(1)、尽可能拆分成可独立复用的组件

(2)、通过组合方式使用多个组件

实现:可以像面向对象CSS那样实现按钮(btn)、分页等小组件

三、开闭原则

(1)对扩展开放

(2)对修改关闭

.box{
                display: block;
                padding: 10px;
            }
            /*不好的写法*/
            .content .box{
                padding: 20px;
            }
            /*较好的写法  扩展*/
            .box-large{
                padding: 20px;
            }

 

四、命名原则

(1)优先使用基于功能的命名(如btn)

(2)基于内容的命名(如header-content)

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:stylish——一键为网页换肤,改变字体大小,去除广告

下一篇:理解Flexbox弹性盒子