/*1. 使用嵌套规则来提高代码的可读性*/ .main { background-color: #fff; padding: 20px; .title { color: #333; font-size: 24px; } .content { color: #666; font-size: 16px; } } /*2. 避免使用 !important*/ .main { background-color: #fff !important; } /*3. 使用缩写属性来减少代码量*/ /*常见的缩写属性*/ .main { margin: 20px 10px; padding: 10px 20px; border: 1px solid #ccc; } /*4. 使用前缀来保证跨浏览器兼容*/ /*常见的前缀*/ .main { -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; } /*5. 遵循盒模型规范*/ /*标准盒模型*/ .element { width: 100px; padding: 10px; border: 1px solid #ccc; } /*IE盒模型*/ .element { width: 100px; padding: 10px; border: 1px solid #ccc; box-sizing: border-box; } /*6. 避免选择器层级过深*/ /*避免*/ .main ul li a span { color: #333; } /*优化*/ .main a span { color: #333; } /*7. 使用 CSS 预处理器*/ /*常见的 CSS 预处理器*/ .main { margin: 20px; padding: 10px; color: #444; &:hover { background-color: #eee; color: #333; } }
以上就是一些常见的 CSS 代码总结。通过遵循这些规范和技巧,大家可以提高代码的可读性和易维护性,进一步优化大家的前端开发流程。