写css关于id,class等的命名,文件的结构,共同模块的提取,代码的复用性,可读性,扩展性,维护性都要考虑,不然后期可以会需要花大力气去进行维护修改.考虑写出足够科学的css,需要考虑下面几个方面.(参考博客园 灵感的小窝) 首先分析需求,根据需要分出头部.导航.侧边栏.banner区,主要内容区,底部等.由于需要东西的复用度很高,不好归于任何一个固定模块,比如分页,弹窗等,他们需要单独分出一段专属的css和js,即组件化.有了清晰的结构后,便于维护.然后在细化,发现一些复用度高的小的部分,…

大部分前端开发人员都不关心CSS性能优化,其实对于一个复杂的页面来说,高效的选择器还是可以带来一定的性能提升的. 1. CSS 选择器 浏览器是“从右往左”来分析 class 的,它的匹配规则是从右向左来进行匹配的,因此最右边的选择符就是关键选择符. Descendant selector #toc > li {font-weight: bold} 浏览器首先会查找页面上所有的“li”节点,然后再去做进一步的判断:如果它的父节点的 id 为“toc”,则匹配成功. Descendant sele…

一.css代码优化作用与意义 1.减少占用网页字节.在同等条件下缩短浏览器下载css代码时间,相当于加快网页打开速度2.便于维护.简化和标准化css代码让css代码减少,便于日后维护3.让自己写的css代码更加专业. 二.css代码优化的方法 1.使用简写 如果你现在还对简写一点都不了解,那你就又写落伍了,不过幸好,学起来并不是很难.使用简写是一种让代码减少的最简单方法.没有比现在更适合实践代码简写的时候了,还等什么,一起来看看吧. Margin.border.padding.backgroun…

Normalize.css:优化重置CSS默认属性 官方网站:http://necolas.github.io/normalize.css/ 项目仓库:https://github.com/necolas/normalize.css/ 下载方法: NPM npm install --save normalize.css Bower bower install --save normalize-css CDN See https://cdnjs.com/libraries/normalize Do…

css选择器优化@import url(http://i.cnblogs.com/Load.ashx?type=style&file=SyntaxHighlighter.css);@import url(/css/cuteeditor.css);…

第二次讨论 [响应式设计] 集中创建页面的图片排版大小,可以智能地根据用户行为以及使用的设备环境(系统平台.屏幕尺寸.屏幕定向等)进行相对应的布局. 响应式布局: meta标签的实用:设置布局宽度等于设备宽度,布局viewport等于度量viewport <meta name="viewport" content="width=device-width,initial-scale=1"> [[布局]] [水平居中] 一.text-align和inline…

10个CSS简写/优化技巧23来源/作者:未知 类别:前端开发 字体大小:大|中|小 背景颜色:蓝|白|灰 ? ? CSS简写就是指将多行的CSS属性简写成一行,又称为CSS代码优化或CSS缩写.CSS简写的最大好处就是能够显著减少CSS文件的大小,优化网站整体性能,更加容易阅读. 下面介绍常见的CSS简写规则: 一.盒子大小这里主要用于两个属性:margin和padding,我们以margin为例,padding与之相同.盒子有上下左右四个方向,每个方向都有个外边距: 1234margin-t…

根据微信订阅号“设计达人”推送的文章,学到了如题知识.个人尝试了一下,感觉还不错.原文链接:http://mp.weixin.qq.com/s/g9TyBwB9xIi45TGwTBOLSQ. 字体 从用户体验角度来讲,段落文本阅读体验最好的是黑体(无衬线体),而非宋体(衬线体),Win7的时候,字体默认的宋体,而从Windows 10开始,浏览器默认字体改成微软雅黑了,而 Mac OS 默认也是黑体而非宋体. 推荐字体: Windows:MicroSoft YaHei(微软雅黑) Mac OS:…

本文作者:高峰,360奇舞团前端工程师,W3C性能工作组成员,同时参与WOT工作组的学习. 我们都知道对于网站来说,性能至关重要,CSS作为页面渲染和内容展现的重要环节,影响着用户对整个网站的第一体验.因此,与其相关的性能优化是不容忽视的. 对于性能优化我们常常在项目完成时才去考虑,经常被推迟到项目的末期,甚至到暴露出严重的性能问题时才进行性能优化,相信大多数人对此深有体会. 笔者认为,为了更多地避免这一情况,首先要重视起性能优化相关的工作,将其贯穿到整个产品设计与开发中.其次,就是了解性能相关…

一.利用好代码折叠 css也可以进行优雅的代码折叠而且会比html更好看 折叠后的效果: 这样就可以很舒服的把它折叠起来. 二.向Twitter Bootstrap学习 1. 学习的第一点就是用class,去减少id.当然这是一个很基本的知识. 2. 学习的第二点是命名的词汇. 如group.control.banner.list.item,title.panel.content.container这些表结构和关系的词汇: 还有一些形容词danger.primary.lg.xs.info等等:…