CSS在工程中改变之面向对象的 CSS

oocss的概念
众多开发者忽视了css的表现(认为它)
oocss将页面可重用的元素抽象成一个类,用class加以描述,而与其对应的HTML即可看成是此类的一个实例。

oocss的作用
1.加强代码复用以便方便维护。
2.减少cs体积
3.提升渲染效率
4.组件库思想,栅格布局可共用,减少选择器,方便扩展。
注意事项
1.不要直接定义子节点,应该把共性放在父类中

2.结构和皮肤相分离

3.容器与内容相分离

4.抽象出可重用的元素,建好组件库,在组件库内寻找可用的元素组装页面
5.往你想要扩展的对象本身增加class而不是他的父节点。
6.对象应保持独立性

7.避免使用ID选择器,权重太高,无法重用
8.避免位置相关的样式

9.保证选择器相同的权重
10.类名,简短,清晰,语义化,oocss的名字并不影响HTML语义化。
目前用得比较多的css:reset.css,normalize.css,neat.css
本文看自CSS在工程中改变之面向对象的 CSS视频

原文地址:https://www.cnblogs.com/smart-girl/p/11543597.html

时间: 2024-10-06 12:56:50

CSS在工程中改变之面向对象的 CSS的相关文章

谈谈CSS预处理技术中for循环的应用-CSS Sprite

各种新技术的出现,推动着Web前端技术飞速发展,在提升用户体验的同时也方便开发者: 在前端优化时,我们使用CSSSprite技术,把多个图片合在一张图片上,然后通过background-image,background-position来定位现实不同效果,这样来达到减少HTTP请求,毕竟HTTP请求是相当昂贵的,但是HTTP请求是少了,开发人员工作量就大了,要定位图片不是一件很方便的事情,非常麻烦,要一个一个地计算: 其实我们可以有点技巧,让图片排列有点规律,这样可以减少大量时间: 假如我们的图

JS中改变CSS样式以及阻止冒泡总结

在JS中改变CSS样式,一般是通过鼠标或者键盘事件触发调用函数来实现CSS样式的改变,采用“className.style.stylename="";”来实现,例如 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>DOM编程挑战</title> <link rel="stylesheet" type

iOS工程中的info.plist文件的完整研究

原地址:http://blog.sina.com.cn/s/blog_947c4a9f0100zf41.html 们建立一个工程后,会在Supporting files下面看到一个"工程名-Info.plist"的文件,这个是对工程做一些运行期配置的文件,很重要,不能删除. 如果你在网上下载的工程中的这个文件名只是Info.plist,那么恭喜你,这个工程太老了,是用包含SDK2.0以前的Xcode生成的,不过没关系,不影响使用. 如果你使用文本编辑器打开这个文件,你会发现这是一个XM

vc中改变对话框的背景色

---- 笔者曾在<软件报>2000年第5期中讨论过如何改变控件的颜色,但还有相当一部分的读者来信提问:一个基于对话框的MFC AppWizard应用程序中,如何改变对话框的背景颜色呢?对于这个问题,其实可以由几种不同的方法来实现,具体如下(粗斜体代码为增添的): ---- 方法一:调用CWinApp类的成员函数SetDialogBkColor来实现. ---- 其中函数的第一个参数指定了背景颜色,第二个参数指定了文本颜色.下面的例子是将应用程序对话框设置为蓝色背景和红色文本,步骤如下: --

快速替换整个工程中的关键词

情景一: 想要替换工程中某个文件的关键词为另一个词  :把鼠标放在关键词上片刻  关键词右下角会出现黑色的箭头 单击箭头 下拉中 选择 edit all 然后就可以改变一个词 其他的跟着做相应的改动了 情景二:要改变整个工程中的关键词为另一个  单击左侧栏中的放大镜按钮  出现如下 然后单击find 出现下图 选择replace 出现下图 上面的框中输入的是要查找的关键词“DFDFD” 下面的输入的是要替换成的词"SDFSDSDDDDD" 输入完成后先安回车 会 查找出工程中所有的“D

在工程中积累经验 之 程序目录使用二三事

最近做工程比较多,其实也就是实验室的事吧,以后工作了也是会工程任务比较多吧. 为了方便自己积累经验,有很多工程性的东西是需要注意的,这些经验性的东西积累起来应该会给以后的工作带来很多好处.就像设计模式一样,都是一些处理相关问题的经验型方法,如果能很好地整理并且掌握这些经验,对很好的提高自己的工程能力吧.     这次要讲述程序工作目录相关问题,不注意的话可能会出问题哦. 比如说现在让你完成一个组件,如果用C++的方式来描述,就是说你要完成一个库,这个库可以是静态库也可以是动态库,让别人调用你.正

解决MVC中使用BundleConfig.RegisterBundles引用Css及js文件发布后丢失的问题

ASP.NET MVC4,ASP.NET MVC5中对JS和CSS的引用又做了一次变化,在MVC3中我们这样引用资源文件: <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" /> 将在运行的时候自动将虚拟(相对)路径转换为应用程序绝对路径.这是比较传统的引用方式,尽管他做了一次转换操作,对服务器的请求数量

四步搞定NiosII工程路径改变(转)

四步搞定NiosII工程路径改变 (2014-08-03 16:41:01) 转载▼http://blog.sina.com.cn/s/blog_bff0927b0102uy30.html 标签: nios 路径改变 setting.bsp 分类: 开发工具 在NiosII的开发过程中,路径改变会带来一系列问题:比如当我们在PC上某个路径下新建一个工程Nios_Prj(含QuartusII工程.Qsys模块和NiosII工程)后,假设其路径为C:\Nios_Prj,如果将工程路径改为D:\Nio

jqueryui中改变datepicker的z-index值

今天遇到了一个关于div层覆盖的问题,我在同一个页面引入了jqueryui中的datepiker和百度编辑器,结果datepiker日期所在的div层被覆盖了.如图所示: 然后在firebug里查看,发现datepiker所在div层默认的z-index为1,而ueditor的却是999,所以被覆盖住了,所以只需要把datepiker的z-index调大就行了.那怎么修改呢?代码如下:   $('.date').datepicker({                     //改变z-ind