init

css3/05-efficient-css-writing/demo.css

@@ -0,0 +1,37 @@
+/* 优化前的代码 */
+.container .item .title {
+    font-size: 16px;
+    color: #333;
+}
+
+.container .item .content {
+    font-size: 14px;
+    color: #666;
+}
+
+.container .item .button {
+    padding: 10px 20px;
+    background: blue;
+    color: white;
+}
+
+/* 优化后的代码 */
+.container {
+    font-size: 16px;
+    color: #333;
+}
+
+.item {
+    font-size: 0.875em; /* 14px / 16px */
+}
+
+.item .content {
+    color: #666;
+}
+
+.button {
+    padding: 0.625em 1.25em; /* 10px 20px / 16px */
+    background: blue;
+    color: white;
+    will-change: transform; /* 优化动画性能 */
+}