zoukankan      html  css  js  c++  java
  • MaintainableCSS 《可维护性 CSS》 --- 约定篇

    约定

    可维护的CSS具有以下约定:

    .<module>[-<component>][-<state>] {}
    

    根据所讨论的模块,方括号是可选的。这里有些例子:

    /* 模块 Module container */
    .searchResults {}
    
    /* 组件 Component */
    .searchResults-heading {}
    
    /* 状态 State */
    .searchResults-isLoading {}
    

    注意:

    组件和状态都由破折号定界。
    名称形式上是用lowerCamelCase。
    选择器以模块名称为前缀。
    

    我必须给每个元素一个类名?

    不需要,你可以这样写 .searchResults p。但请注意,如果您嵌套包含p的模块,那么它将继承样式并需要重写(overriding)。

    为什么要加模块名称前缀?

    好问题。这里有一些没有前缀的HTML:

    <div class="basket">
    <div class="heading">
    

    CSS:

    /* module */
    .basket {}
    
    /* heading component of basket module */
    .basket .heading {}
    

    有两个问题:

    1. 当查看HTML时,很难区分模块和组件;
    2. `.basket .heading` 组件将继承意想不到副作用的 `.heading` 模块中的样式。
  • 相关阅读:
    幂等设计
    Dubbo
    Kubernetes-K8S
    Log4Net配置以及使用
    网站对话框开源脚本--ArtDialog V6.0
    实现VS2010整合NUnit进行单元测试(转载)
    HTML+CSS页面滚动效果处理
    Bootstrap 表格 笔记
    Bootstrap 排版 笔记
    Bootstrap简介
  • 原文地址:https://www.cnblogs.com/lvyongbo/p/7110542.html
Copyright © 2011-2022 走看看