精简CSS代码可以帮助减小样式文件的大小,使代码清晰,方便维护. 使用简写属性及默认值 .header { margin-top: 10px; margin-right: 20px; margin-bottom: 30px; margin-left: 40px; } /* 可以使用简写属性 margin */ .header { margin: 10px 20px 30px 40px; /* 4个值分别对应方向为 top right bottom left */ } /* ==========…

前言 提高网站整体加载速度的一个重要手段就是提高代码文件的网络传输速度.之前提到过,所有的代码文件都应该是经过压缩了的,这可提高网络传输速度,提高性能.除了压缩代码之外,精简代码也是一种减小代码文件大小的手段.以下将讨论CSS代码相关的代码精简方案. 定义简洁的CSS规则 CSS的每条规则中都包含了规则的属性及属性值.定义简洁的CSS规则主要是指合并相关规则和定义简洁的属性值. 1. 合并相关CSS规则 CSS中的某些样式是由多个规则组成的,比如字体样式,就包含:font-family.font…

前言 提高网站整体加载速度的一个重要手段就是提高代码文件的网络传输速度.之前提到过,所有的代码文件都应该是经过压缩了的,这可提高网络传输速度,提高性能.除了压缩代码之外,精简代码也是一种减小代码文件大小的手段.以下将讨论CSS代码相关的代码精简方案. 定义简洁的CSS规则 CSS的每条规则中都包含了规则的属性及属性值.定义简洁的CSS规则主要是指合并相关规则和定义简洁的属性值. 1. 合并相关CSS规则 CSS中的某些样式是由多个规则组成的,比如字体样式,就包含:font-family.font…

css的团队合作规则以及怎样写出高性能的css代码. 一.使用Reset但并非全局Reset 同浏览器元素的默认属性有所不同,使用Reset可重置浏览器元素的一些默认属性,以达到浏览器的兼容.但需要注意的是,请不要使用全局Reset: ;; } 这不仅仅因为它是缓慢和低效率的方法,而且还会导致一些不必要的元素也重置了外边距和内边距.在此建议参考YUI Reset和Eric Meyer的做法. html{ color:#000; background:#FFF; } body, div, dl,…

css 写起来并不难,但在大型项目中,就变得难以管理,特别是不同的人在 css 书写风格上稍有不同,团队上就更加难以沟通,为此总结了一些如何实现高效整洁的 css 代码原则. css 优化的原则 1.不影响页面的布局 2.去掉不必要的样式 3.合并相同的样式 4.尽可能缩小样式的大小 css 样式中常见的问题 1.除 body 之外的样式重写了与 body 一样的样式,如: 1 body{font-size:12px;color:red;} 2 h1{font-size:16px;color:r…

6. 适当的代码注释 代码注释可以让别人更容易读懂你的代码,且合理的组织代码注释,可使得结构更加清晰.你可以选择做的样式表的开始添加目录: /*------------------------------------ 1. Reset 2. Header 3. Content 4. SideBar 5. Footer ----------------------------------- */ 如此你代码的结构就一目了然,你可以容易的查找和修改代码. 而对于代码的主内容,也应适当的加以划分,甚至…

写html页面的时候,多修改几次就会出现很多无用的css代码,下面使用gulp-uncss来精简css文件,去掉没用的css代码 1.首先找个目录创建一个gulp项目在命令行输入:npm init  然后一路回车创建一个项目 2.安装gulp和gulp-uncss --save -dev 在命令行输入: npm install gulp npm install gulp-uncss --save -dev 3.安装完成后在目录里创建一个文件 gulpfile.js(文件名不要改,改了会报错),然…

作者:@狼狼的蓝胖子 网址:http://www.cnblogs.com/lrzw32/p/5100745.html 写CSS的同学们往往会体会到,随着项目规模的增加,项目中的CSS代码也会越来越多,如果没有及时对CSS代码进行维护,CSS代码不断会越来越多.CSS代码交错复杂,像一张庞大的蜘蛛网分布在网站的各个位置,你不知道修改这行代码会有什么影响,所以如果有修改或增加新功能时,开发人员往往不敢去删除旧的冗余的代码,而保险地增加新代码,最终的坏处就是项目中的CSS会越来越多,最终陷入无底洞.…

CSS代码重构的目的 我们写CSS代码时,不仅仅只是完成页面设计的效果,还应该让CSS代码易于管理,维护.我们对CSS代码重构主要有两个目的:1.提高代码性能2.提高代码的可维护性 提高代码性能 提高CSS代码性能主要有两个点:1.提高页面的加载性能提高页面的加载性能,简单说就是减小CSS文件的大小,提高页面的加载速度,尽可以的利用http缓存2.提高CSS代码性能不同的CSS代码,浏览器对其解析的速度也是不一样的,如何提高浏览器解析CSS代码的速度也是我们要考虑的 提高代码的可维护性 提高CS…

原文转自:http://blog.jobbole.com/55067/ 编写好的CSS代码,有助提升页面的渲染速度.本质上,引擎需要解析的CSS规则越少,性能越好.MDN上将CSS选择符归类成四个主要类别,如下所示,性能依次降低. ID 规则 Class 规则 标签规则 通用规则 对效率的普遍认识是从Steve Souders在2009年出版的<高性能网站建设进阶指南>开始,虽然该书中罗列的更加详细,但你也可以在这里查看完整的引用列表,也可以在谷歌的<高效CSS选择器的最佳实践>中…

对于初学css的新手朋友来说,经常会遇到这样一个问题,当文字和图片出现在同一行或者同一个div里面的时候,在浏览器中运行出来的显示效果往往是在不同的行,那么,我们怎么才能利用CSS代码使图片和文字在同一行显示且对齐呢? 对于这种现象,方法有3种: 1.通过添加css的“vertical-align:middle;”: 2.如果图片是背景图片,可以在css中设置背景图片,然后设置文字的padding属性: 3.把文字和图片分别放入不同的div中. 经过多次的测试,上面三种方法都可以让图片和文字在同…

前言 本篇文章上一篇: 对百度WebUploader开源上传控件的二次封装,精简前端代码(两句代码搞定上传) 此篇是在上面的基础上扩展出来专门上传图片的控件封装. 首先我们看看效果: 正文 使用方式同样很简单,首先创建HTML容器如下: <div id="uploader" class="uploaderPic"> </div> 然后页面加载完成后渲染: $(function () { $("#uploader").pow…

CSS代码重构的基本方法 前面说到了CSS代码重构的目的,现在我们来说说一些如何达到这些目的的一些基本方法,这些方法都是易于理解,容易实施的一些手段,大家平时可能也不知不觉地在使用它. 提高CSS性能的手段 首先说说如何提高CSS性能,根据页面的加载性能和CSS代码性能,主要总结有下面几点: 1.尽量将样式写在单独的css文件里面,在head元素中引用 有时候为了图方便或者快速搞定功能,我们可能会直接将样式写在页面的style标签或者直接内联在元素上,这样虽然简单方便,但是非常不利于日后的维护.…

CSS代码重构与优化之路   阅读目录 CSS代码重构的目的 CSS代码重构的基本方法 CSS方法论 我自己总结的方法 写CSS的同学们往往会体会到,随着项目规模的增加,项目中的CSS代码也会越来越多,如果没有及时对CSS代码进行维护,CSS代码不断会越来越多.CSS代码交错复杂,像一张庞大的蜘蛛网分布在网站的各个位置,你不知道修改这行代码会有什么影响,所以如果有修改或增加新功能时,开发人员往往不敢去删除旧的冗余的代码,而保险地增加新代码,最终的坏处就是项目中的CSS会越来越多,最终陷入无底洞.…

编写基本的CSS和HTML是我们作为Web开发人员学习的首要事情之一.然而,我遇到的很多应用程序显然没有人花时间真正考虑前端开发的长久性和可维护性. 我认为这主要是因为许多开发人员对组织CSS / HTML和JavaScript的策略缺乏深刻的理解. 在我和我们团队的观念中,编写可维护的前端代码非常重要.尽管我们有一些使用了多年的客户端,但要记住你永远不会是唯一一个工作于应用程序的人.仅仅因为你的一次性元素和配置对你有意义,并不意味着它们对下一个可能继承应用程序的人有意义. 为了防止这篇文章太长…

CSS学起来并不难,但在大型项目中,就变得难以管理,特别是不同的人在CSS书写风格上稍有不同,团队上就更加难以沟通,为此总结了一些如何实现高效整洁的CSS代码原则: 1. 使用Reset但并非全局Reset 不同浏览器元素的默认属性有所不同,使用Reset可重置浏览器元素的一些默认属性,以达到浏览器的兼容.但需要注意的是,请不要使用全局Reset:   *{ margin:; padding:; } 这不仅仅因为它是缓慢和低效率的方法,而且还会导致一些不必要的元素也重置了外边距和内边距.在此建议…

编写基本的CSS和HTML是我们作为Web开发人员学习的首要事情之一.然而,我遇到的很多应用程序显然没有人花时间真正考虑前端开发的长久性和可维护性. 我认为这主要是因为许多开发人员对组织CSS / HTML和JavaScript的策略缺乏深刻的理解. 在我和我们团队的观念中,编写可维护的前端代码非常重要.尽管我们有一些使用了多年的客户端,但要记住你永远不会是唯一一个工作于应用程序的人.仅仅因为你的一次性元素和配置对你有意义,并不意味着它们对下一个可能继承应用程序的人有意义. 为了防止这篇文章太长…

CssStats 是一个在线的 CSS 代码分析工具,你只需要输入网址或者直接 CSS 地址即可进行 CSS 代码的全方位分析,是前端开发人员和网页设计师分析网站 CSS 代码的利器,可以统计出 CSS 代码里的规则数量.字体颜色.字体大小.背景颜色数等等. 马上去试试 您可能感兴趣的相关文章 网站开发中很有用的 jQuery 效果[附源码] 分享35个让人惊讶的 CSS3 动画效果演示 十分惊艳的8个 HTML5 & JavaScript 特效 Web 开发中很实用的10个效果[源码下载] 1…

css是不能够定义变量的,也不能嵌套.它没有编程语言的特性.在项目开发中,常常发现有很多css代码是相同的,但我们通常都是复制然后粘贴. 举个例子:假设h5应用里主题色是#FF3A6D,可能用于文字或者背景色.通常开发中,哪里需要这个颜色,我们就复制这个颜色并粘贴.下次要修改就得全部查找批量替换,其实不是很方便. 本文即将介绍的less将让我们更快更方便的编写css代码. Less是什么 Less 是一门 CSS 预处理语言,它扩充了 CSS 语言,增加了诸如变量.混合(mixin).函数等功能…

我的页面定制CSS代码,针对博客园SimpleGamboge皮肤. 调整: 1.左上图片更换为自己的头像 2.扩大左侧栏宽度,缩小右侧主栏宽度宽度 3.扩大内容页面的评论区宽度,工具图标靠左 4.去广告…… 5.拉伸状态下,左侧栏固定宽度,右侧栏适应(by grace) /*左上头像*/ #lnkBlogLogo { float: right; display: block; width: 180px; /*调整*/ height: 180px; /*调整*/ background-image:…

原文链接:https://hacks.mozilla.org/2016/05/css-coding-techniques/ 译文链接 :http://www.zcfy.cc/article/css-coding-techniques-x2605-mozilla-hacks-8211-the-web-developer-blog-1244.html 最近,我发现许多人被CSS难倒,无论是新手还是有经验的开发者.自然地,他们就希望能有一种更好的语言来代替它,CSS预处理器就是从这种想法中诞生的.一些…

1.垂直对齐 如果你用CSS,则你会有困惑:我该怎么垂直对齐容器中的元素?现在,利用CSS3的Transform,可以很优雅的解决这个困惑: .verticalcenter{ position: relative; top: 50%; -webkit-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } 使用这个技巧,从单行文本.段落到box,都会垂直对齐.目前浏览器…

效果预览:http://hovertree.com/code/texiao/ks63r6aq.htm <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>超漂亮的HTML导航菜单CSS代码 - 何问起</title> <style> #top { display: block; text-align: left; hei…

如何简单兼容性的实现父元素是半透明背景色,而子元素不受影响. 兼容所有浏览器的背景颜色半透明CSS代码: background-color: rgba(, , , .); filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr=#,endColorStr=#); 注意:startColorStr 和 endColorStr 的值,前两位是十六进制的透明度,后面六位是十六进制的颜色. 其格式为 #AARRGGBB . AA…

明白何谓Margin Collapse 不同于其他很多属性,盒模型中垂直方向上的Margin会在相遇时发生崩塌,也就是说当某个元素的底部Margin与另一个元素的顶部Margin相邻时,只有二者中的较大值会被保留下来,可以从下面这个简单的例子来学习: ? .square {    width: 80px;    height: 80px; }.red {    background-color: #F44336;    margin-bottom: 40px; }.blue {    backg…

Dreamweaver自带的代码格式化功能. 1.步骤:命令 -> 应用源格式. 2.你可以选择你的偏好.特别是css代码,有些人喜欢每个属性单独一行,有些人喜欢把所有属性写在同一行.步骤:编辑 -> 首选项 -> 代码格式 -> 点击css按钮设置好以后,再次应用源格式,就会按照你的偏好来整理代码了.…

1.垂直对齐 如果你用CSS,则你会有困惑:我该怎么垂直对齐容器中的元素?现在,利用CSS3的Transform,可以很优雅的解决这个困惑: .verticalcenter{ position: relative; top: 50%; -webkit-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } (ps:[译]如何实现CSS居中?–CSS居中常用方法)使用这个…

在一篇文章中收集所有的CSS代码片段几乎是不可能的事情,但是我们这里列出了一些相对于其他的更有用的代码片段,不要被这些代码的长度所吓到,因为它们都很容易实现,并且具有良好的文档.除了那些解决常见的恼人的问题外,也包含了一些解决新问题的新技术. 1. 垂直对齐 如果你之前遇到过这个问题,你就应该知道它是多么的烦人,幸运的是,现在你可以使用CSS3变换来解决这个问题: .vc{ position: relative; top: 50%; -webkit-transform: translateY(-…

转载自:http://www.wiibil.com/website/sublimelinter-jshint-csslint.html 在Sublime Text中安装SublimeLinter,Node.js进行JS&CSS代码校验 发布时间: 2016年1月11日 作者: WIIBIL 阅读:801 次 评论数:4 次 文章目录 [隐藏] 一:Sublime Text 中需要先安装Package Control 二.安装SublimeLinter 三.安装SublimeLinter-jshi…

对于同样的项目或者是一个网页,尽管最终每个前端开发工程师都可以实现相同的效果,但是他们所写的代码一定是不同的.有的优雅,看起来清晰易懂,代码具有可拓展性,这样的代码有利于团队合作和后期的维护:而有的混乱,虽然表达出了最终的效果,然而却晦涩难懂,显然团队成员在读这样的代码时就显得无从下手,更不利于后期的维护了.那么如何写出优雅的代码呢?下面我将以一个很小的项目就以下几个方面简单的表达一下自己的看法,如有不妥,望批评指正. 如何整理一个项目. 如何写出清晰易懂的HTML代码. 如何写出优雅的css代…