首页 > 代码库 > CSS开发规范

CSS开发规范

2024-07-21 15:58:13   222人阅读

摘要：

　　无论多少人开发一个项目，规范是最初始也是最基本的，一个好的规范不仅让代码看起来完美也能够解决冲突。下面是我在开发时使用的css规范

基本规范：

  1. 所有名称小写，符合w3c规范
  2. 类名和id，多个变量之间用中划线连接
  3. 所有变量只能使用名词
  4. 变量定义要符合语义化

基本原则：

  1. 以项目名或者一个全局名称为命名空间，例如你的项目名叫demo，则命名空间为demo，这样在多人合作开发时，高度统一如一人编写。
  2. 关注分离，将 HTML、CSS 解耦；模块化编码。

模块化编写实践：

  1. 语义化的模块名

    通过模块名应该能一眼就看出模块的是干什么的。一般模块名代表着这个模块的功能，如看到shopping就知道这个模块是购物的

  2. 模块内部的类名继承自父级

    如：
    1 <div class="demo-shopping">2    <h2 class="demo-shopping-title">title</h2>3    <p class="demo-shopping-body">hello world!</p>4 ?</div>

     上面的代码中，模块的名为 shopping，模块最外层使用 {命名空间}-{模块名} 的方式命名 Class。模块子元素以在此基础上进行命名。如果不继承父级的类名，很容易造成命名冲突。

  3. 充分考虑结构的语义化

    　　  虽然在 Class 的命名上已经做到的了关注分离，编写样式不再依赖具体的元素名称，但仍应该考虑语义化，根据元素设计的目的来使用元素。是段落的，你就用 <p>；是标题的，就用 <h1>~<h6>；是引用的，就用 <blockquote>， 而不是简单粗暴的用 <div>、<span>。语义化的目的，一方面是抽去 CSS 以后，页面还是一个结构良好、可读的页面；另一方面，这也是 SEO 的最基本要求。
  4. 避免不必要的 CSS 选择符嵌套

            Class 已经模块化命名，从类名上已经可以清晰的分辨元素的从属，一般情况下也不会造成类名冲突，没有必要再进行选择器嵌套，保持 css 结构清晰，提高渲染效率。特殊情况可以嵌套（如提高权重、主题之间代码隔离），但应避免过多层级。
    1 /* 推荐写法 */2 .demo-shopping {3     4 }5 .demo-shopping-body {6 7 }8 /* 不推荐写法 */9 .demo-shopping .demo-shopping-body {}

  5. 与 JS 交互时，在模块 HTML 结构的最外一层添加状态，而非给模块每个子元素单独添加元素

    给最外层添加状态类以后，整个模块的样式都能控制，减少操作，提高性能，比如，我们可以这样写：
    1 <div class="demo-shopping demo-shopping-active">2    <h3 class="demo-shopping-title"></h3>    3    <p class="demo-shopping-content"></p><4 /div>

     

    但不要这样写（效率更低）：
    1 <div class="demo-box">2    <h3 class="demo-shopping-title demo-shopping-title-active"></h3>3    <p class="demo-shopping-content demo-shopping-content-active"></p>4 </div>


命名注意事项：

  1. 语义化，望文见义
    如 demo-tab、demo-nav，不要使用 red、left 等表象的词命名。
  2. 模块状态： {命名空间}-{模块名}-{状态描述}
    常用状态有：hover, current, selected, disabled, focus, blur, checked, success, error 等
  3. 子模块： {命名空间}-{模块名}-{子模块名}
    常用模块名有：bd(body)，cnt(content)，hd(header)，text(txt)，img(images/pic)，title，item，cell 等， 词义表达组件要实现的功能。
  4. 模块嵌套：
    1 <ul class="demo-nav">2     <li class="demo-nav-item">3         <a href="#">nav</a>4         <ul class="demo-subnav">5             <li class="demo-subnav-item">6                 <a href="#">subNav</a>7                     <ul class="demo-list">
  5. 统一命名风格（使用相同名词命名不同组件的子元素）：
    如 demo-tab-head, demo-modal-head，便于理解。

总结：

　　在开发中养成一个好的习惯是非常重要的，每个开发人员都应该有自己的规范，希望通过此文对你以后的编码有所改变。如果你有更好的建议，可以补充。

CSS开发规范


联系
我们