OOCSS学习(二)
OOCSS —— 面向对象CSS
在本文中,你将学习书写CSS的最佳实践来帮助你避免不一致和冗余;实际上,这样制定标准,简化了团队开发的工作。
1)结构化
(根据不同内容分区块,加注释)
2)越多的CSS就需要越多的组织
(加二级注释)
3)自由格式化
另一些人使用特殊字符如‘=’,作为搜索字符的标记:
4)交流注释用法
5)什么时间,谁做了什么
(文件头部增加文件创建和更新的摘要注释)
6)颜色值
COLORS: Green #b3d88c | Blue #0075b2 | Light Gray #eee | Dark Gray #9b9e9e | Orange #f26522 | Teal #00a99d | Yellow #fbc112
(提前定好,方便维护)
7)开发和调试
(将有问题或疑惑的地方注释出来,有时间时找同事一起解决)
8)样式重置
Eric Meyer的重置文档,去掉用不到的标签。
不过,我应该澄清一下,css重置并不适用于所有人。你有很多不使用他的理由,这由你决定。如果你要重置样式,要保持你的重置样式表尽量干净和特殊。
9)命名约定
不仅仅是上下文,有语意的命名还可以节约时间。考虑到一个公司品牌的频繁更换,如果你开发的css使用表现的类名而不是语义化的类名和id名,那么在寻找、维护css时,你将比预期花费更多的时间。
10)类名滥用
由此产生的css本身和他造成的冗余并不可怕,可怕的是他造成的困惑。作为一个设计师看到了这个form类,可能猜想是不是其他样式表里也定义了叫form的类名,然后去查找根本不存在的样式,这就是我时间浪费的原因。
11)类名不等于特异性
如果你的元素定义样式不需要类名,那就不要用。用的太多类名,不仅使你的结构和css很臃肿,也失去了他们在css 中的意义。
12)多类
虽然我不提倡使用不必要,多余的类名,但是对于通过多类保持元素表现的共用
13)分组选择器
14)一行还是多行书写?
一行
15)需要按照字母排序吗?
(结构排序或字母顺序排序,你想用哪个用哪个)
16)使用简写
17)0值
没必要给他指定单位
18)颜色模式
19)(。。。以下省略)
6.开始编写CSS
(这篇写的比较NB,直接看原文好)
1)CSS预处理器
SASS
2)BEM
块(Block)、元素(Element)和修改器(Modifier)
.site-header { ... } /* block */
.site-header__logo { ... } /* element */
.site-header__logo--xmas { ... } /* modifier */
.site-header__navigation { ... } /* element */
3)OOCSS
面向对象CSS
4)SMACSS
SMACSS代表可伸缩的和是模块化的CSS结构体系
- 基本(base):用于一个简单的选择器的基本样式,如
clearfix
- d布局(Layout):定义网格
- 模块(Module):一群元素相结合在一起形成的一个模块,比如说
header
和sidebar
- 状态(State):元素的不同状态。如隐藏、按住,扩大等规则定义给对象
- 主题(Them):更多的样式
- 基本(base):用于一个简单的选择器的基本样式,如
5)Atomic Design
6)OrganicCSS
虽说没看明白啥意思,但发现一个比较吊的mixin
@mixin login-box {
@include atoms((
block,
font-size-20,
margin-top-23,
bold
));
}
可以写一写。有个库,地址:http://krasimir.github.io/organic-css/
先上一个PPT:http://takazudo.github.io/presentation-oocss-sass/。
用@extend + %占位符来实现OOCSS,多写写什么都明白了。
而且OOCSS可以用于页面布局,但要注释明白,逻辑明确。
8.崇拜CSS
其实就是让你用sass来写OOCSS,而不是用css直接写(这样会造成标签过长,失去语义化)。
和7一样。
最后,加一篇SMACSS的:
写的很好,结合实际项目,可以用来参考。
.my-module {
background-color: maroon;
position: relative; > a {
color: aqua;
}
}
.my-module--important {
@extend .my-module;
border: 3px solid fuchsia;
}
.my-module--is-active {
background-color:red;
}
.my-module__close-button {
position: absolute;
right:;
top:;
}
分文件:
modules/_my_module.scss
modules/_child_component.scss
modules/_grandchild-component.scss
Configuration(配置)
Mixins(混合)
Grid(网格)
我们不打算从我们编译的CSS中删除每一个重复点。我们想要开发尽可能的容易,而又不影响性能。到目前为止用mixins模块代替@extend
,这样并不会增加原始文件大小。
OOCSS学习(二)的更多相关文章
- emberjs学习二(ember-data和localstorage_adapter)
emberjs学习二(ember-data和localstorage_adapter) 准备工作 首先我们加入ember-data和ember-localstorage-adapter两个依赖项,使用 ...
- ReactJS入门学习二
ReactJS入门学习二 阅读目录 React的背景和基本原理 理解React.render() 什么是JSX? 为什么要使用JSX? JSX的语法 如何在JSX中如何使用事件 如何在JSX中如何使用 ...
- TweenMax动画库学习(二)
目录 TweenMax动画库学习(一) TweenMax动画库学习(二) TweenMax动画库学习(三) Tw ...
- Hbase深入学习(二) 安装hbase
Hbase深入学习(二) 安装hbase This guidedescribes setup of a standalone hbase instance that uses the local fi ...
- Struts2框架学习(二) Action
Struts2框架学习(二) Action Struts2框架中的Action类是一个单独的javabean对象.不像Struts1中还要去继承HttpServlet,耦合度减小了. 1,流程 拦截器 ...
- Python学习二:词典基础详解
作者:NiceCui 本文谢绝转载,如需转载需征得作者本人同意,谢谢. 本文链接:http://www.cnblogs.com/NiceCui/p/7862377.html 邮箱:moyi@moyib ...
- Quartz学习--二 Hello Quartz! 和源码分析
Quartz学习--二 Hello Quartz! 和源码分析 三. Hello Quartz! 我会跟着 第一章 6.2 的图来 进行同步代码编写 简单入门示例: 创建一个新的java普通工程 ...
- SpringCloud学习(二):微服务入门实战项目搭建
一.开始使用Spring Cloud实战微服务 1.SpringCloud是什么? 云计算的解决方案?不是 SpringCloud是一个在SpringBoot的基础上构建的一个快速构建分布式系统的工具 ...
- DjangoRestFramework学习二之序列化组件、视图组件 serializer modelserializer
DjangoRestFramework学习二之序列化组件.视图组件 本节目录 一 序列化组件 二 视图组件 三 xxx 四 xxx 五 xxx 六 xxx 七 xxx 八 xxx 一 序列化组 ...
- SpringMVC入门学习(二)
SpringMVC入门学习(二) ssm框架 springMVC 在上一篇博客中,我简单介绍了一下SpringMVC的环境配置,和简单的使用,今天我们将进一步的学习下Springmvc的操作. mo ...
随机推荐
- 图论 BZOJ 3669 [Noi2014]魔法森林
Description 为了得到书法大家的真传,小E同学下定决心去拜访住在魔法森林中的隐士.魔法森林可以被看成一个包含个N节点M条边的无向图,节点标号为1..N,边标号为1..M.初始时小E同学在号节 ...
- 【数学】CSU 1810 Reverse (2016湖南省第十二届大学生计算机程序设计竞赛)
题目链接: http://acm.csu.edu.cn/OnlineJudge/problem.php?id=1810 题目大意: 一个长度为N的十进制数,R(i,j)表示将第i位到第j位翻转过来后的 ...
- 【宽搜】BAPC2014 J Jury Jeopardy (Codeforces GYM 100526)
题目链接: http://codeforces.com/gym/100526 http://acm.hunnu.edu.cn/online/?action=problem&type=show& ...
- C++引用变量学习
版权所有,转载请注明来源 (1)reference variable(rv) 主要用处是作为方程的形式参数,使用rv 可以直接对原数据进行操作而不是该数据的拷贝,节省了时间和空间,尤其是对于结构体以及 ...
- 用Processon在线绘制UML的尝试
地址https://www.processon.com/ ProcessOn是一个面向垂直专业领域的作图工具和社交网络,成立于2011年6月并于2012年启动.ProcessOn将全球的专家顾问.咨询 ...
- log4j配置祥解
第一步:加入log4j-1.2.8.jar到lib下. 第二步:在CLASSPATH下建立log4j.properties.内容如下: 1 log4j.rootCategory=INFO, stdou ...
- 414. Third Maximum Number
这个题有点坑啊..主要是自己蠢,以为 Integer.MIN_VALUE -1 == -2147483649 public class Solution { public int thirdMax(i ...
- oracle 大文本由clob来存
file字段是varchar2类型(最多只能存储4000字符),空间不够用了,因此将其改为clob类型(支持4G存储量). 但是如果该字段中已经有数据,是不为空的,直接用语句改,会报错. 那么需要借助 ...
- 【bzoj2594】[Wc2006]水管局长数据加强版
真是神题 当时调了几天没调出来 后来没管了 当时把fread去掉就TLE,加上就RE 一直在底下跟网上的程序拍,尝试各种优化常数都没用 拍出几组不一样的,发现我是对的,醉了,网上那个是怎么过的 记一下 ...
- Unity3D NGUI制作进度条
利用GUI可以制作进度条,但是NGUI更加方便 我是用的NGUI3.5.3, 先找到NGUI Slider的预制体,利用自带的UISlider来制作. 主要是利用UISlider的Value来控制进 ...