CSS开发框架技术OOCSS编写和管理CSS的方法
目前最流行的CSS开发框架技术当属OOCSS,尽管还有其他类似技术(如BEM)。这些方法试图对CSS采用面向对象的编程原则。样式语言与面向对象的设计原则在概念之间存在一定的问题。欠缺经验的人员可能不会注意到这些微妙的东西。拥有一个编写和管理CSS的方法比什么都要更好。一些开发实践不利于语义化质量和长期的可维护性。讨论一些被提倡的“CSS框架方法”问题。如何更好的解决这些问题。
语义化在计算机科学中只有两硬东西,缓存失效和命名的事件。
当编写HTML,有三种主要的方式表达内容、Web界面或应用程序的语义化:内容使用的元素类型制作的模板;使用ID用来识别一个独特的,单个元素;用类名来分类一组元素。
最重要的是让前端开发人员通过一个CSS框架技术来解决一个网站中重复的CSS代码是首要的事情。
(1)<div class="box-standard box-special"> Here is a special box! </div> 通过这种方式在模板中添加两个类名用来减少重复的代码是可取的,同时这两个类名也传达了特定的语义.
这里开发人员真正需要一个“混合”和"扩展",这些在各种CSS预处理器中都有,比如LESS或者Sass.
个关于mixin在Scss语法中的简单示例: px; , ; } div.news { @include news-item(blue); } div.breaking { @include news-item(red); font-weight: bold; } class="breaking"> Here is a breaking news item! </div>
改变mixin的样式风格总是通过div.breaking来实现,并且尽可能的与模板不耦合在一起。在CSS中能够定义mixin就是他一直以来 想要的特性(这功能最终在预处理器中实现。),如果你想成为一个专业的CSS开发人员,你没有什么好理由不使用CSS预处理程序。
在一味的追求“模块化”。这样避免在CSS中有重复的代码,不过转移到模板中,导致的副作用就是模板和样式的紧耦合性。
(2)另一个目标是提供高性能。这取决天很多因素,如客户端访问一个网页的类型,他们的连接速度和内容是否有被缓存,还有其他一些因素等等。在最基本的级别上有三种东西最明显的影响CSS性能:(所需的HTTP请求数 缓存状态 文档大小).
前两个考虑的范围可以采用CSS框架方法,而第三个是通过类名来解决重用:其目的是,通过声明尽可能少的样式越少,CSS文件就越可能的小。
CSS开发框架技术OOCSS编写和管理CSS的方法的更多相关文章
- CSS Hack技术详解,支持IE 6-11、Chrome、FireFox、Safari、Opera 6-11、Chrome、FireFox、Safari、Opera6-11、Chrome、FireFox、Safari、Opera6-11、Chrome、FireFox、Safari、Opera
转自: http://www.365mini.com/page/css-hack-ie-chrome-firefox-safari-opera.htm 当前网络时代,各种各样的网页向我们展示着丰富多彩 ...
- 如何提升我的HTML&CSS技术,编写有结构的代码
前言 之前写了四篇HTML和CSS的知识点,也相当于是一个知识点汇总.有需要的可以收藏,平时开发过程中应该会遇到这些点,到时候再查看这些博客可能更容易理解.从这篇开始更多的介绍开发过程经常让人头痛的前 ...
- Animo.js :一款管理 CSS 动画的强大的小工具
Animo.js 是一个功能强大的小工具,用于管理 CSS 动画.它的特色功能包括像堆栈动画,创建跨浏览器的模糊,设置动画完成的回调等等.Animo 还包括惊人的 animate.css,为您提供了近 ...
- 如何写好CSS?(OOCSS\DRY\SMACSS)
我现在面对的CSS基本上就是一个三头六臂的怪物,一点不夸张,因为真的是三头六臂,同一个样式在同一个element上作用了好几遍,而同一个样式又分散在4,5个class上,优先级有很多层.可以看得出这个 ...
- Web前端技术研究:Css hack技术---令人沮丧的技术
我最近想好好整理下csshack技术,但是结果很沮丧,下面我将我最初写的笔记和大家分享下. 我在单位整理的研究笔记: 不同的浏览器对某些CSS代码解析会存在一定的差异,因此就会导致不同浏览器下给用户展 ...
- 利用CSS预处理技术实现项目换肤功能(less css + asp.net mvc4.0 bundle)
一.背景 在越来越重视用户体验的今天,换肤功能也慢慢被重视起来.一个web系统用户可以选择一个自己喜欢的系统主题,在用户眼里还是会多少加点分的.我们很开心的是easyui v1.3.4有自带defau ...
- 6种编写HTML和CSS的最有效的方法
感谢HTML5和CSS3,以及JavaScript,前端开发者有了大大的用武之地.大家都在用很多的工具和技术来武装自己,以加快前段的开发. 本文分享了6中最有效的方法,希望能提供你的效率,为你节约时间 ...
- 好程序员web前端分享值得参考的css理论:OOCSS、SMACSS与BEM
好程序员web前端分享值得参考的css理论:OOCSS.SMACSS与BEM 最近在The Sass Way里看到了Modular CSS typography一文,发现文章在开头部分就提到了OOCS ...
- 用DIV+CSS切割多背景合并图片 CSS Sprites 技术
很久之前就在互联网网站和一些js插件中见过这种技术的应用,当时觉得很麻烦,就没有用,也没有去深究. 近段时间一直在做前台的一些东西,涉及到很多div+css的问题.这个东东我又碰到了,所以我花了点时间 ...
随机推荐
- 经典网络还是VPC,开发者作何选择?
近两天,关于公有云经典网络(基础网络)与私有网络(VPC)的讨论引发技术圈极大关注,事件起因于有开发者将数据库限制在内网访问,但由于安全组设置的原因,阿里云邻居用户被黑后,牵连到了自己的业务.为此,开 ...
- 浅析=======Struts2之==========valueStack
今天刚学习了struts2的valueStack,在这里把自己学到的做个分享,说道valueStack就不得不提OGNL表达式=== struts2工作流程 1.OGNL(Object Graph N ...
- Java面试12|Linux及Shell脚本
1. 随便写一个awk的命令.用awk统计文本行数 (1)最近登录的5个帐号 last -n 5 | awk -F ':'(指定域分割符号) '{print $1}' 读入有'\n'换行符分割的一条记 ...
- Adapter基本用法
使用流程 graph LR A(新建适配器) -->B(绑定数据源) B-->C(设置适配器) 1. ArrayAdapter new ArrayAdapter<?>(cont ...
- Pow(x, n) leetcode
Implement pow(x, n). Subscribe to see which companies asked this question 利用依次消去二进制位上的1,来进行计算 double ...
- maven 的 snapshot 和 release 的区别
release 是发行版,通常正式发布使用. snapshot 快照版本.在开发过程中,每提交一次修改,编译好响应的jar包,都会更新到仓库中,所有添加了这个jar包的依赖都会把远程仓库里的jar包更 ...
- ps-修复
1- 复制图层 2- 工具栏——套索——多变套索工具——上侧工具栏——羽化(15像素) 选区,防止其他区域被修改 羽化,让修改的边缘柔和化 3- 选项区——编辑——填充 ...
- 计算机程序的思维逻辑 (75) - 并发容器 - 基于SkipList的Map和Set
上节我们介绍了ConcurrentHashMap,ConcurrentHashMap不能排序,容器类中可以排序的Map和Set是TreeMap和TreeSet,但它们不是线程安全的.Java并发包中与 ...
- CSS后代选择器、子元素选择器、相邻兄弟选择器区别与详解
派生选择器用的很多,派生选择器具体包括为后代选择器.子元素选择器.相邻兄弟选择器,我们来理解一下他们之间的具体用法与区别. 1.css后代选择器语法:h1 em {color:red;} 表示的是从h ...
- Grunt usemin
yeoman/grunt-usemin 用来将 HTML 文件中(或者 templates/views)中没有优化的 script 和 stylesheets 替换为优化过的版本. usemin 暴露 ...