CSS Architecture

CSS Architecture 要求 在编辑一个类的CSS时不会影响其他类的CSS 这个类的CSS是名称显而易见的 不能使HTML变得臃肿 必须立即知道这个组件是否在使用JavaScript 最佳方案,使用BEM和其中命名空间的优化版 Block 一个Block是代表一个组件 .form来代表form元素因为class具有无限的重用性 button是一个很好的例子,如果你用button属性设置它的背景颜色,所有的button都会应用这个样式 你不得不一个个是覆盖其他你想要定义的颜色 如果你使用class的button,你可以自己决定在任何一个button使用这个class。或者你想用其他的颜色你可以使用.button--secondary .button { background-color: red; } .button--secondary { background-color: blue; »

calc()的工作方式

计算完成后的值是表达式本身而不是计算后的值 用CSS预编译器做数学计算时,传给浏览器的值是已经计算好的值 // Value specified in SCSS .foo { width: 100px + 50px; } // Compiled CSS and computed value in browser .foo { width: 150px; } // Value specified in CSS .foo »

CSS中鲜为人知的属性

all属性重置被选择的元素的所有属性,除了控制文本方向的direction unicode-bidi,initial: 重置所有的属性变成CSS规范中的默认属性,inherit: 继承原来的应该从父元素继承的属性,unset: 继承原来的应该从父元素继承的属性,如果没有可以继承的值,使用初始值. background-clip定义在背景中文本区域的大小 border-box: (默认值) 允许背景延伸到边框的外部 content-box: 背景延伸到元素的content-box padding-box: 背景被剪切到元素的填充的外边缘,因此它应用于内容区和内边距,而不是在边框下 text: 背景被剪切到前景文本。 currentColor:表示元素color属性的计算值。 .parent »

Absolutely Position Element Center

Center An Absolutely Positioned Element The method above works to automatically center one item inside another, but the method assumes that you’re using the default »

CSS Display property review

display:none; Removes the element and its children from the normal document flow. the space it occupied is collapsed. The content of the element is also »