css 编写注意-1-定名约定

编写按照可维护性、性能和可读性规则：
1.代码构造与布局​​​​​​​

• 条理清楚：利用模块化的布局，将样式分块构造。
  
• 定名规范：采取同一的定名规则（如 BEM、SMACSS）以增强可读性。​​​​​​​
  2. /* BEM 命名示例 */
  3. .block {}         /* 块 */
  4. .block__element {} /* 块的元素 */
  5. .block--modifier {} /* 块的修饰符 */

  复制代码

• ​​​​​​​表明清楚：对复杂的样式块添加表明，方便团队协作。
          ​​​​​​​
  2. /* Header 样式 */
  3. .header {
  4.     background-color: #f8f9fa;
  5. }

  复制代码

​​​​​​​​​​​​​​2.定名约定

• BEM 定名法（Block-Element-Modifier）​​​​​​
  
  
  
  • Block：体现组件的名称。
    
  • Element：体现组件内部的子部分。
    
  • Modifier：体现组件或子部分的差异状态或变体。       
    2. .menu {}               /* Block */
    3. .menu__item {}         /* Element */
    4. .menu__item--active {} /* Modifier */

    复制代码
  
  
• SMACSS 定名法
  
  
  
  • ​​​​​​​​​​​​​​Base：底子样式（HTML 元素的默认样式）       
    2. h1, p {
    3.     margin: 0;
    4.     padding: 0;
    5. }

    复制代码
  •                 Layout：页面布局干系的样式
           
    2. .header {}
    3. .footer {}

    复制代码
  •                 Module：页面的功能模块
           
    2. .card {}
    3. .button {}

    复制代码
  •                 State：形貌模块的状态
           
    2. .is-active {}
    3. .is-hidden {}

    复制代码
  •                 Theme：主题样式。
           
    2. .theme-dark {}
    3. .theme-light {}

    复制代码
  
  
•         常见组件定名
  
  
  
  •                 ​​​​​​​布局干系
    
    
    
    • .container：容器。
      
    • .row：行。
      
    • .col：列。
      
    • .grid：网格布局。
      
    • .header：头部。
      
    • .footer：底部。
      
    • .sidebar：侧边栏。
      
    • .main：告急内容地区。
      
    
    
  • 导航干系
    
    
    
    • .nav：导航栏。
      
    • .nav__item：导航项。
      
    • .nav__link：导航链接。
      
    • .breadcrumb：面包屑导航。
      
    
    
  •                 按钮干系
    
    
    
    • .btn：按钮。
      
    • .btn-primary：告急按钮。
      
    • .btn-secondary：次要按钮。
      
    • .btn--disabled：禁用状态按钮。
      
    
    
  •                 表单干系
    
    
    
    • .form：表单。
      
    • .form__group：表单组。
      
    • .form__label：表单标签。
      
    • .form__input：表单输入框。
      
    • .form__error：表单错误提示。
      
    
    
  •                 通用状态
    
    
    
    • .is-active：运动状态。
      
    • .is-disabled：禁用状态。
      
    • .is-hidden：隐蔽状态。
      
    • .has-error：错误状态。
      
    • .no-js：无 JavaScript 支持时的样式。
      
    
    
  
  

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。