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上
- 小米科技|不聊性能只谈拍照!新旗舰反向升级成潮流,拍照手机如何选?
- 搜索引擎|淘宝运营系统出台春节打烊功能,淘宝运营商家该如何选择?
- 小米科技|RTX3060的性能到底如何?相比RTX2060提升有多大?
- 小米 11 Ultra 内测 NFC“读写勿扰”与“解锁后使用”功能
- 物联网|?内容创作者:要明白文章首先是写给推荐系统看的!
- 市值超 1.7 万亿的Netflix是如何做决策的?
- javascript|Web前端培训:什么是 MEAN Stack?
- QQ音乐的2021专辑盘点,是如何征服资深乐迷的
- 外国友人广西写春联、剪纸体验中国传统年味
- 外国友人广西写春联、剪纸 体验中国传统年味