微信的CSS樣式命名規范很重要,因為它能夠讓我們更清晰、更高效地編寫CSS代碼,并且方便團隊合作。下面是一些我們應該遵守的規范:
/* CSS選擇器命名遵守BEM命名規范 */ .block{} .block__element{} .block--modifier{} /* 命名不應當過于具體 */ .btn {} .btn--large {} .btn__icon {} /* 選擇器應該盡可能地簡短 */ .container {} .main {} .header {} .footer {} /* 遵守小寫字母和連接符命名 */ .news-list {} .news-list__item {} .news-list__item--highlight {} /* 避免使用數字 */ .nav-1 {} .nav-2 {} .nav-3 {} /* 每個屬性應該都用逗號隔開 */ .class { font-size: 16px; color: #fff; background-color: #000; } /* 流程可讀性和可復用性都需要考慮進去 */ .sidenav-item {} .sidenav-item_active {} .sidenav-item__link {} /* 避免過于深套的嵌套 */ .course { &-header { } &-content { } &-footer { } } /* 多人協作時不能全部以自己的命名習慣去定義,要遵守統一約定好的規范 */
遵循微信的CSS樣式命名規范,可以有效提高我們編寫CSS的效率和代碼的質量,同時也可以減少命名沖突等因素對代碼的影響。當然,盡管命名規范已經定義好,但仍要結合實際場景和項目需要,有時候也需要靈活調整,以達到更好的效果。
上一篇css邊框 glow
下一篇微信css兼容性問題