CSS的书写方式

前端之家收集整理的这篇文章主要介绍了CSS的书写方式前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

写CSS对于干这行当的人来说,稀松平常,没啥的。就像让你写个带背景、阴影、有边框、内外边距、水平垂直居中的卡片,三两下就搞出来了。

是否曾想过有过自己的一套书写方式?自己的行为规范或者现在给自己定个准则?

写的多了、久了,就会慢慢的,慢慢的发现,修改的时候你总要在编辑器里拖来拖去(假设你的写法是下面这样子的,假设有横向滚动了,不能很快的定位你要的样式属性),当然了这只是其中之一个理由....

.a { margin: 0 auto ... display: block; }
.b { position: relative ... font-size: 12px; }
.c { ... }

我们写的时候大部分都是,先看到什么,写什么,想到什么,写什么,最终目的就是把需要的还原出来就可以了。

就像前面所说的例子,写个卡片,你的样式怎么写?这样?

.card {
    background: ...;
    Box-shadow: ...;
    border: ...;
    margin: ...;
    padding: ...;
    transform: ...;
    font-size: ...;
    display: ...;
}

这样写有什么问题么?没问题...

下次写的时候你还会是这个顺序写吗?

那下下次、下下下次...呢?

我们从浏览器的解析角度来看,浏览器的解析方式是,从末尾往前、从下往上、从右往左(指一行样式声明)的读取,直至到达.card这里,然后应用样式。

那么在这个读取的过程中,有什么规则呢?有的,以下是浏览器的解析方式:

  1. 背景颜色

  2. 背景图片

  3. 边框

  4. 子代

  5. 轮廓

从1到5,那么写的时候就是这样的:

  1. 位置属性(position,top,right,z-index,display,float等)

  2. 大小(width,height,padding,margin)

  3. 文字系列(font,line-height,letter-spacing,color- text-align等)

  4. 背景(background,border等)

  5. 其他(animation,transition等)

猜你在找的程序笔记相关文章