CSS样式表优化
前几天公司要模仿一家客户的网站模板来为另一客户新建一个模板,说白了就是换个数据源,然后样式表再小修小改一下就行了。但通过浏览器控制台下载素材时,发现这个网站开发的挺专业的,单就样式表而言,代码工整,注释清楚,给人的感觉就是‘这样式表看起来挺漂亮的’。而相比之下,我们公司的样式表就挺恶心了,但是好的东西就要学,所谓它山之石可以攻玉。
我们一点点看,这个人家2年前就写好的样式表有哪些值得学习的地方。
1、时间戳和签名
/*
* ---------------------------------------------
* website :潍坊商业学校
* filename :default.css
* revision :1.0
* createdate :2012-07-02
* author :lc
* description :default.css
* ---------------------------------------------
*/
我觉得肯花时间来写时间戳和签名的人,在其他需要注释的地方也不会偷工减料
2、使用单行模式格式化CSS
所谓单行模式就是将原来多行的描述
#top_back
{
width:1015px;
height:32px;
margin:0 auto;
background: url(../images/homes/top_back.jpg) repeat-x;
}
通过精简工具,格式化成为一行#top_back{ width:1015px; height:32px; margin:0 auto; background: url(../images/homes/top_back.jpg) repeat-x; },也许我这样写你看不出来效果,但你可以想象一下,一个样式表统一都用多行进行描述,那在快速浏览时会多么的头疼。
推荐一个CSS在线格式化工具:CSSTidy
3、清晰的组织结构
使用注释来标识不同的区块,将会使你的样式表更加整洁、有条理
* { margin:; padding:; }
body { font: 12px "宋体", Verdana, Arial, sans-serif; background: #eeeeee; }
ul { list-style-type: none; }
a { text-decoration: none; color: #000; }
img { border: none; }
table { border-collapse: collapse; }
/* 常用类 */
.floatLeft { float: left; }
.floatRight { float: right; }
.clearFloat { clear: both; }
.alignRight { text-align: right; }
.alignCenter { text-align: center; }
... ...
/*****************************顶部按钮****************************************/
... ...
/*****************************头部****************************************/
... ...
4、类特征值的命名规则
避免使用颜色,例如left-blue(包括颜色名称和十六进制值或者宽度,高度的尺寸值),同时你也尽量的避免去使用任何表明表现形式的值,例如box,要不然将表现和内容分离的意义也就不复存在了。推荐的命名规则:.product-description { color: #369; }
5、id特征值的命名规则
id特征值的命名时,应该更加严谨,因为你的命名可能会影响到后台程序员调用。另外注意,命名要有层次感,例如嵌套层的时候使用如下命名规则,那我们就算不看html代码也能大概猜出特征值要描述的元素。
#focus { width: 340px; height: 261px; float: left; overflow: hidden; }
#focus01 { padding: 30px 15px 4px 25px; width: 300px; height: 227px; }
#focus02 { width: 300px; height: 227px; overflow: hidden; } 或者 #focus { width: 340px; height: 261px; float: left; overflow: hidden; }
#focus_left { padding: 30px 15px 4px 25px; width: 300px; height: 227px; }
#focus_right { width: 300px; height: 227px; overflow: hidden; }
CSS样式表优化的更多相关文章
- CSS样式表的写作规范
推荐大家使用的CSS书写规范.顺序 写了这么久的CSS,但自己都没有按照良好的CSS书写规范来写CSS代码,东写一段西写一段,命名也是想到什么写什么,过一段时间自己都不知道写的是那一块内容, 这样会影 ...
- 深度理解CSS样式表,内有彩蛋....
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- CSS样式表
CSS样式及属性 样式标的基本概念 样式表的分类 1.内联样式表 和html联合显示,控制精确,但可重用性差,冗余多. 例:<p style="font-size:14px;" ...
- JS 控制CSS样式表
JS控制CSS所使用的方法: <style> .rule{ display: none; } </style> 你想要改变把他的display属性由none改为inline. ...
- HTML基础(三)——css样式表
CSS(Cascading Style Sheet,叠层样式表),作用是美化HTML网页. /*注释区域*/此为注释语法 一.样式表 (一)样式表的分类 1.内联样式表 和HTML联合显示,控制精确, ...
- DOM与CSS样式表
在前文 <DOM与元素节点内联样式>中我们了解了用 DOM 提供的接口操作元素节点内联样式的方法,今天我们来学习一下如何用 DOM 操作 CSS 样式表. CSS 样式表概况 通过使用 H ...
- 一起学HTML基础-CSS样式表-基本概念、分类、选择器
一.基本概念: CSS (Cascading Style Sheets)层叠样式表,是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言. ...
- CSS样式表继承详解
最近在恶补css样式表的基础知识.上次研究了css样式表之冲突问题详解 .这次是对 css 继承 特性的学习. 什么是css 继承?要想了解css样式表的继承,我们先从文档树(HTML DOM)开始. ...
- 2016年10月27日--css样式表
CSS样式表 样式表分类 1.内联样式表 和html联合显示,控制精确,但是可重用性差,冗余多. !doctype html> <html> <head> <met ...
随机推荐
- XLua 基础
一.Lua文件加载 1.Resources文件夹下加载 xxx.lua.txt 文件 1.)Resources加载xuaTest文件 // 1.Resources加载xuaTest文件 TextA ...
- 读取某文件夹下所有excel文件 python
import os import pandas as pd from sklearn import linear_model path = r'D:\新数据\每日收益率' filenames = os ...
- vue -- 使用sass并引入公共sass文件
sass可以提高我们的开发效率,怎么在vue的项目中使用sass并且可以设置一些公共的文件呢? 使用sass 1.安装sass的依赖包 npm install --save-dev sass-load ...
- ARC085F(动态规划,线段树)
#include<bits/stdc++.h>using namespace std;const int maxn = 0x3f3f3f3f;int mn[801000];int cost ...
- [poj 1276] Cash Machine 多重背包及优化
Description A Bank plans to install a machine for cash withdrawal. The machine is able to deliver ap ...
- 洛谷P1480 A/B Problem(高精除高精)
P1480 A/B Problem 题目描述 输入两个整数a,b,输出它们的商(a<=10^5000,b<=10^9) 输入输出格式 输入格式: 两行,第一行是被除数,第二行是除数. 输出 ...
- scapy框架
性能相关 在编写爬虫时,性能的消耗主要在IO请求中,当单进程单线程模式下请求URL时必然会引起等待,从而使得请求整体变慢. import requests def fetch_async(url): ...
- vue散碎知识点学习
1. vue散碎知识点学习 1.1. 特点 数据渲染/数据同步 组件化/模块化 其他功能路由,ajax,数据流 1.2. Vue.js学习资源 vuejs中文官网:http://cn.vuejs.or ...
- myeclipse非正常关闭处理办法
myeclipse正常或非正常关闭后,再次运行,不显示启动时的logo和读条,进入主页面后程序基本就卡死,无法正常运行,解决办法. 方法一:修改工作空间在刚启动Myeclipse的时候会有一个选择工作 ...
- Just a Hook(线段树区间更新)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1698 In the game of DotA, Pudge’s meat hook is actual ...