CSS复合属性，于前端开发里，是提效的厉害工具，它让开发者借一条简写规则，同时操控多个子属性，极大地削减代码冗余。在实际项目当中，合理运用复合属性，不但能优化样式表结构，还可为交互设计带来更顺畅的响应体验。我依据多年实战经验，总结出一些关键技巧。
复合属性如何简化日常布局
有不少开发者惯于分开去写padding或者margin，这样会使得代码行数出现膨胀的状况。就好比padding-top、padding-right各自分散着写，实际上完全能够通过padding: 10px 20px这一句就处理妥当。然而需要留意顺序，即上右下左，要是记错了就极易出现bug。当我去重构电商活动页的时候，将几十行零散分布的边距合并成为几条复合属性，文件体积一下子缩减了30%。
更奇妙的场景存在于动画交互当中，transition属性能够同时操控多个属性产生变化，与hover状态协同配合，能够制造出平滑的按钮反馈效果，比如说按钮处于悬停状态时颜色以及阴影会同时进行过渡，仅仅需要书写transition: all 0.3s ease，便能够省去逐个进行声明的操作，然而all会耗费性能，我一般会指定相应的具体属性，在移动端卡片点击反馈方面，我常常会配合transform以及opacity，使得交互响应速度得到显著提升。
复合属性在响应式设计中的落地技巧
在响应式项目当中，background复合属性着实尤其实用，一条background: url(bg.jpg) center/cover no-repeat就把图片位置、缩放以及重复给搞定了，省去了编写三行代码的麻烦，我于重构某资讯站首页之际，运用这种办法对多个模块的背景图予以统一管理，媒体查询仅仅需要更改URL或者尺寸，维护成本便直线下降了。
常被忽视复合属性为 font，在一行里设置字号与行高，加上字重还有字体族，像 font: bold 16px/1.5 Arial，专用于排版齐整之文章区。留意复合属性会将未指定的子属性重置成默认值，就如 font-style。曾遇开发者于组件中使用 font，之前设置斜体被覆盖，需排查良久。因而使用之前要去确认子属性不受影响，或者复合完后再补上单独设置。
交互设计当中，outline以及box-shadow的复合运用方法能够起到让焦点样式得以提升的作用，我常常运用box-shadow: 0 0 0 2px blue来制造出那种外发光的效果，以此来替代outline，从而避免对布局产生干扰，在表单验证这个环节之中，当输入框出现错误情况的时候，会同时对边框以及阴影做出改变，仅仅一条复合属性就能让状态变更显得更为清晰。
于真实的项目当中，并不存在那种放之四海而皆准的规则，重点在于要去领会每一个子属性的默认数值以及其优先级。我给出这样的建议，要先从padding、margin以及background这些方面着手练习，接着再一步步地拓展到transition和font。把控复合属性的本质所在，这是一条能够缩减代码数量，从而提升交互稳定性的便捷途径。