Code Guide is a project for documenting standards for developing flexible, durable, and sustainable HTML and CSS. It comes from years of experience writing code on projects of all sizes. It's not the end-all be-all, but it's a start.

Comparing three ways of mobile SEO.

CSS: Difference between ^ and | selector:

Caret ^: selects elements where the value of the specified attribute starts with a certain value:

Pipe |: selects elements where the value of the specified attribute is either exactly the value or starts with the value immediately followed by -:

Difference between pipe (|) and caret (^) attribute selectors

结合实际代码, 用最快速度介绍 Sass 的最常用部分特性.

以 SCSS 语法为准.

CSS 有没有 "前一相邻元素" 选择器? 为什么有 "后一相邻元素" 选择器, 却没有 "前一相邻元素" 选择器? 这和 "级联样式表" 的定义有什么关联?

和 Prism 可以和谐共处, 但升级至 Bootstrap 4 后, 它们之间会产生一点小小的样式冲突, 一些 token 会变得非常小, 因为 Bootstrap 加入了新的 class: .tag, 这是已经被 Prism 占用的 class, 造成了 Prism token 的字体变小 (75%), 还引起其他的一些样式变化.

Mastering margin collapsing

CSS 中, 有 3 种情况会导致 margin 的坍缩 (collapse).

1. 垂直方向相邻的两个兄弟元素, 上方元素设置了 margin-bottom, 下方元素设置了 margin-top 时, 二者间距取较大者;

2. 元素上方没有用 border, padding, inline-content 或清除浮动等方式将其第 1 个子元素与其 margin-top 分割开时, 该元素的 margin-top 将为其本身 margin-top 与其第 1 个子元素的 margin-top 的较大者, margin-bottom 同理;

3. 不占位, 即没有用有效的 border, padding, inline-content, height, min-height 等方式将其 margin-top 与其 margin-bottom 分割开时, 其 margin-top 和 margin-bottom 将全部坍缩.

CSS 中，可以将 line-height 设置为纯数字，当 line-height 设置为纯数字时，行高为元素字体大小值与该数字的乘积。