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上