CSS 书写顺序&&BEM命名规范

最新推荐文章于 2023-05-24 13:56:55 发布

Tone@

最新推荐文章于 2023-05-24 13:56:55 发布

阅读量699

点赞数

分类专栏： HTML\CSS 文章标签： css html css3

本文链接：https://blog.youkuaiyun.com/TongJ_/article/details/130638666

版权

HTML\CSS 专栏收录该内容

2 篇文章

订阅专栏

一、css书写顺序

样式属性顺序（按照先后顺序排序）

1、定位属性：position display float left top right bottom overflow clear z-index
2、自身属性：width height padding border margin background
3、文字样式：font-family font-size font-style font-weight font-varient color
4、文本属性：text-align vertical-align text-wrap text-transform text-indent text-decoration letter-spacing word-spacing white-space text-overflow
5、css3中新增属性：content box-shadow border-radius transform……

/* yes */                             /* no */
.example {                            .example {   
  z-index: -1;                          color: red;
  display: inline-block;                background-color: #eee;
  font-size: 16px;                      display: inline-block;
  color: red;                           z-index: -1;
  background-color: #eee;               font-size: 16px;
}                                     }

二、BEM命名规范

BEM(Block Element Modifier) 是一种命名CSS class的模式，使用这种模式可以让 CSS 代码更加利于维护。标准的 BEM 写法是 .block-name__element-name--modifier-name。

Block

页面上逻辑和功能独立的，可复用的组件，可以嵌套并相互交互，但在语义上它们保持平等，可以存在页面上不同的位置或不同项目中，保持样式不变。

Element

组成块的一部分，内部的任何元素都与块有关联，不能在块的外部使用。

Modifier

用来表示块或者元素的状态，外观或者行为，不必须，可以选择使用。
示例：

<div class="list-card">
  <img class="list-card__img" />
  <div class="list-card__content">
    <a class="list-card__link"></a>
    <p class="list-card__desc"></p>
    <div class="list-card__stats">
      <span class="list-card__stat"><i class="list-card__icon"></i></span>
      <span class="list-card__stat"><i class="list-card__icon"></i></span>
      <span class="list-card__stat"><i class="list-card__icon"></i></span>
      <span class="list-card__date"></span>
    </div>
  </div>
</div>

三、常用CSS class名

包裹类： container, wrapper, outer, inner, box, header, footer, main, content, aside, page, section, block
状态类： primary, secondary, success, danger, warning, info, error, Link, light, dark, disabled, active, checked, loading
尺寸类： large, middle, small, bigger, smaller
组件类： card, list, picture, carousel, swiper, menu, navs, badge, hint, modal, dialog
位置类： first, last, current, prev, next, forward, back
文本类： title, desc, content, date, author, category，label，tag
人物类： avatar, name, age, post, intro

若有收获，就点个赞吧