CSS coding specifications and css compiling

CSS coding specifications and css compiling

1. Object-oriented CSS (OOCSSS)

OOCSS rule 1:Structure and skin separation

For example,. 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: container and content separation (Not recommended)

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

 

Ii. Single Responsibility Principle

(1) split into reusable components as much as possible

(2) Use multiple components in combination

Implementation:Small components such as buttons (btn) and pages can be implemented like object-oriented CSS..

Iii. Open and Close principles

(1) open to expansion

(2) Disable Modification

. Box {display: block; padding: 10px;}/* bad syntax */. content. box {padding: 20px;}/* Better syntax extension */. box-large {padding: 20px ;}

 

Iv. Naming principles

(1) Give priority to function-based naming (such as btn)

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