Spécifications d'écriture CSS

1. CSS orienté objet (OOCSSS)

Règle OOCSS 1 : Séparation de la structure et de la peau

Tels que .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;
            }

Règle OOCSS 2 : Séparation du conteneur et du contenu (Déconseillé )

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

2. Principe de responsabilité unique

(1), divisez-le en composants qui peuvent être réutilisés indépendamment autant que possible

(2), utilisez plusieurs composants en combinaison

à réaliser : Les widgets tels que les boutons (btn) et la pagination peuvent être implémentés comme du CSS orienté objet.

3. Principe d'ouverture et de fermeture

(1) Ouvert à l'expansion

(2 ) Fermer pour modifications

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

4. Principes de dénomination

(1) Prioriser l'utilisation de la dénomination basée sur les fonctions ( tel que btn)

(2) Dénomination basée sur le contenu (telle que contenu d'en-tête)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!