CSS writing specifications

1. Object-oriented CSS (OOCSSS)

OOCSS Rule 1: Separation of structure and skin

Such as .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 Rule 2: Separation of container and content (Not recommended)

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

2. Single Responsibility Principle

(1), as much as possible Split into components that can be independently reused

(2), use multiple components in combination

to achieve: can Implement widgets such as buttons (btn) and paging like object-oriented CSS.

3. Opening and closing principle

(1) Open to expansion

(2) Close for modification

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

4. Naming principles

(1) Prioritize the use of function-based naming (such as btn)

(2) Content-based naming (such as header-content)

The above is the detailed content of CSS writing specifications. For more information, please follow other related articles on the PHP Chinese website!