init

css3/05-efficient-css-writing/RADEME.md

@@ -0,0 +1,10 @@
+# Efficient CSS Writing
+
+性能优化挑战：高效CSS编写
+题目要求：
+1. 优化以下CSS代码，要求：
+2. 减少选择器复杂度
+3. 使用继承和层叠
+4. 避免重复代码
+5. 使用合适的单位
+6. 优化动画性能

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; /* 优化动画性能 */
+}