search

haizlin / fe-interview

前端面试每日 3+1，以面试题来驱动学习，提倡每日学习与思考，每天进步一点！每天早上5点纯手工发布面试题（死磕自己，愉悦大家），6000+道前端面试题全面覆盖，HTML/CSS/JavaScript/Vue/React/Nodejs/TypeScript/ECMAScritpt/Webpack/Jquery/小程序/软技能……
http://www.h-camel.com
MIT License
25.47k stars 3.26k forks source link

[css] 第311天 你知道什么是面向对象的css（oocss）吗？有没有实践过？ #1942

Open haizhilin2013 opened 4 years ago

haizhilin2013 commented 4 years ago

第311天 你知道什么是面向对象的css（oocss）吗？有没有实践过？

我也要出题

carrie-xin commented 4 years ago

oocss(Object Oriented CSS)不是一种技术也不是一种语言，它是一种css的书写方法，其核心是用最简单的方式编写最整洁的css代码，使代码更具重用性、可维护性和可拓展性。 OOCSS的两条主要准则： 1.结构和皮肤分离; 2.容器和内容分离;

比如一些常用的字体大小、padding、margin值等可以封装为公共样式，html中引用多个类似的类名达到UI效果，减少特性css的代码量 .text-12{ font-size: 12px; } .text-14{ font-size: 14px; } .text-16{ font-size: 16px; }

longhui520 commented 4 years ago 
   1. oocss 将样式从内容抽离出来，使得样式不依赖内容
   2. oocss 抽离出一些公共样式
forever-z-133 commented 4 years ago

在我观念中就是不断继承原子类来书写 CSS。 https://www.npmjs.com/package/common-scss-mixin

.someClass {
  @include pos-top(fixed); /* 顶部定位 */
  @include flex-row(); /* flex 行且垂直居中 */
  @include padding-row(); /* 两边加上 15px 的内边距 */
  @include child-gap-right(); /* 子元素之间间隙为 10px */
  @include border-bottom(); /* 底部毛细线 */
}
.otherClass .xx {
  @extend .someClass;
}