如何更好的管理CSS

BEM Block Element Modifier
https://www.smashingmagazine.com/2018/06/bem-for-beginners/
通过一套统一的方法论来更好地管理CSS

BFC & LFC

block formatting context
line formatting context

我的理解是这个是最小的布局上下文或者叫最小布局单元吧。当某些属性的添加会创建 BFC，一旦产生BFC，那么它就是一个块状的布局上下文，这个容器的行为就是一个上下文容器，里面的元素也无法逃出了，并且float也会在里面了。

Flexbox

CSS中用于布局的一套规则，可以非常方便的使用。

盒子 box 盒模型

CSS主要的布局都是基于盒模型，web页面中的元素可以是看作为一个个盒子相互作用，相互叠加而成。

  • padding

    • padding 上 下 左 右
      1. top、right、bottom、left

  • border

  • margin

【CSS】CSS那些事 - 图1

每一个元素都是基于这样的模型
在chrome dev tool里面，点击某个元素，看样式那边的底部就有这样的一个盒模型

什么是CSS？

CSS也不是真正的编程语言，是一种样式表语言。也就是通过一些列的样式规则，来改变web元素的样式

  • 选择器 selector
    • 元素选择器
    • ID选择器
    • 类别选择器
    • 属性选择器 img[src=’http://….’]
    • 伪类选择器 :hover :after这种
  • 声明 declaration
  • 属性 property
  • 属性值 property value

CSS优先级算法如何计算？

  • 优先级就近原则，同权重情况下样式定义最近者为准;
  • 载入样式以最后载入的定位为准;

优先级为:
同权重: 内联样式表（标签内部）> 嵌入样式表（当前文件中）> 外部样式表（外部文件中）。
!important > id > class > tag
important 比 内联优先级高

组合器和选择器组

Combinators Select
A,B 匹配满足A（和/或）B的任意元素（参见下方 同一规则集上的多个选择器）.
A B 匹配任意元素，满足条件：B是A的后代结点（B是A的子节点，或者A的子节点的子节点）
A > B 匹配任意元素，满足条件：B是A的直接子节点
A + B 匹配任意元素，满足条件：B是A的下一个兄弟节点（AB有相同的父结点，并且B紧跟在A的后面）
A ~ B 匹配任意元素，满足条件：B是A之后的兄弟节点中的任意一个（AB有相同的父节点，B在A之后，但不一定是紧挨着A）

样式层叠优先级

1.重要性：越重要的覆盖不重要的，比如加上!important这个关键词
2.专用性：越是指定的，覆盖不专用的，比如 id选择器会覆盖元素选择器的样式，如果有相同的话。最高级的是写在style里面的
3.加载的顺序：越晚加载的覆盖早加载的

记住这三条规律就好。

  1. 千位：如果声明是在style 属性中该列加1分（这样的声明没有选择器，所以它们的专用性总是1000。）否则为0。
  2. 百位：在整个选择器中每包含一个ID选择器就在该列中加1分。
  3. 十位：在整个选择器中每包含一个类选择器、属性选择器、或者伪类就在该列中加1分。
  4. 个位：在整个选择器中每包含一个元素选择器或伪元素就在该列中加1分。

backgroud-clip 可以设定背景图是保留哪些，是内容部分、到边框部分、到padding部分

display

  • 块框（ block box）是定义为堆放在其他框上的框（例如：其内容会独占一行），而且可以设置它的宽高，之前所有对于框模型的应用适用于块框 （ block box）
  • 行内框（ inline box）与块框是相反的，它随着文档的文字（例如：它将会和周围的文字和其他行内元素出现在同一行，而且它的内容会像一段中的文字一样随着文字部分的流动而打乱），对行内盒设置宽高无效，设置padding, margin 和 border都会更新周围文字的位置，但是对于周围的的块框（ block box）不会有影响。
  • 行内块状框（inline-block box） 像是上述两种的集合：它不会重新另起一行但会像行内框（ inline box）一样随着周围文字而流动，而且他能够设置宽高，并且像块框一样保持了其块特性的完整性，它不会在段落行中断开。（在下面的示例中，行内块状框会放在第二行文本上，因为第一行没有足够的空间，并且不会突破两行。然而，如果没有足够的空间，行内框会在多条线上断裂，而它会失去一个框的形状。）