Java|如何写一份不错的CSS代码？( 三 )

你会认为 CSS规范是一个有点宏大和不必要的概念：为什么这么简单、这么直接的东西需要像架构一样被设计成非常复杂的东西？！
正是因为CSS 的简单性、松散性和不守规矩的性质意味着在任何合理规模上管理（阅读、驯服）它的最佳方式是通过严格和特定的架构。坚实的架构可以帮助我们控制我们的特殊性，强制执行命名约定，管理我们的源代码顺序，创建一个健全的开发环境，并且通常使我们的 CSS 项目管理更加一致和舒适。
总的来说，可以依照以下几个规则订立团队/个人代码规范，保证代码的一致性
建议的几个原则单一职责原则: 每个 CSS 实现都必须有一个单一的责任。Correct: .button { font-family: Arial sans-serif; border: 1px solid black; background: #fff; .header__button { margin: 30px; position: relative; Incorrect: .header__button { font-family: Arial sans-serif; position: relative; border: 1px solid black; margin: 30px;

开闭原则: 元素应该通过修饰符扩展，而不是直接在原有基础上修改。Original:....button { font-family: Arial sans-serif; text-align: center; font-size: 11px; line-height: 20px; Extend....button { font-family: Arial sans-serif; text-align: center; font-size: 11px; line-height: 20px; .button_size_s { font-size: 13px; line-height: 24px;

DRY原则：将有意义的重复规范化和抽象化巧用mixin和extend@mixin my-web-font() { font-family: \"My Web Font\" sans-serif; font-weight: bold;.btn { display: inline-block; padding: 1em 2em; @include my-web-font();.foo { color: red;.bar { @extend .foo;

组合优于继承和关注点分离【Java|如何写一份不错的CSS代码？】// 将写js的方式同样适用在css上