CSS布局命名规范

html-css013

CSS布局命名规范,第1张

页头:header 如:#header{属性:属性值}或.header{属性:属性值}

登录条:loginBar

标志:logo

侧栏:sideBar

广告:banner

导航:nav

子导航:subNav

菜单:menu

子菜单:subMenu

搜索:search

滚动:scroll

页面主体:main

内容:content

标签页:tab

文章列表:list

提示信息:msg

小技巧:tips

栏目标题:title

加入:joinus

指南:guild

服务:service

热点:hot

新闻:news

下载:download

注册:regsiter

状态:status

按钮:btn

投票:vote

合作伙伴:partner

友情链接:friendLink

页脚:footer

版权:copyRight

1.CSS的 ID 的命名

外 套:wrap

主导航:mainNav

子导航:subnav

页 脚:footer

整个页面: content

页 眉:header

页 脚:footer

商 标:label

标 题:title

主导航:mainNav(globalNav)

顶导航:topnav

边导航:sidebar

左导航:leftsideBar

右导航:rightsideBar

旗 志:logo

标 语:banner

菜单内容1: menu1Content

菜单容量: menuContainer

子菜单:submenu

边导航图标:sidebarIcon

注释: note

面包屑:breadCrumb(即页面所处位置导航提示)

容器: container

内容: content

搜索: search

登陆: login

功能区:shop(如购物车,收银台)

当前的 current

2.CSS样式文件命名如下

主要的 master.css

布局,版面 layout.css

专栏 columns.css

文字 font.css

打印样式 print.css

主题 themes.css

五种基本布局定位类型:* 弹性布局 - 总体宽度及其中所有栏的值都以 em 单位编写。这应使布局能够使用浏览器的指定基本字体大小缩放。 对于视力不好的用户, 这可能更有吸引力、更易于访问, 因为栏宽度将变得更宽, 能以任何大小显示更舒适、更可读的行长度。 由于总体宽度将缩放, 您的设计必须允许可这宽度。* 固定布局 - 总体宽度及其中所有栏的值都以像素单位编写。 布局位于用户浏览器的中心。* 流体布局 - 总体宽度及其中所有栏的值都以百分比编写。 百分比通过用户浏览器窗口的大小计算。* 混合布局 - 混合布局组合两种其他类型的布局 - 弹性和流体。 页面的总宽度为 100%, 但侧栏值设置为 em 单位。* 绝对定位布局 - 所有前述布局的外栏使用浮动内容。 而绝对定位布局完全如其名所示 - 有绝对定位的外栏。 必须记住, 当使用这些布局时, 侧栏会“提出文档流程”, 因而可能有一些不合适的结果 (例如, 页脚可能“看不见”在侧栏在何处结束并在主要内容区域包含的内容少于侧栏的页面与页脚重叠)。

CSS用的是类C#语言的标准。

书写方法自由灵活,没有一定的局限。但是常期以来为了阅读和维护等方面的经验,一般都是这样的格式:

标名 {

属性:属性值

属性:属性值;

}

当然这样大家都能理解,你自己也好维护,没有什么特殊的要求的!

为了便于阅读有人建议,CSS分为以下方面的控制:

先写位置等:

如:position:absolute

top,left,width,height等,

空一行,再写布局方面的,如:margin,padding等;

空一行,写字体格式:如line-height等

再空一行,写字体相关!如:font-size,font-color等;

最后是其他的属性!

但一般情况下,我们还是没有必要写那么多的属性值对的!所以就很少有人去空行做这些东西了!

但是一般内容较少时,可以直接写在一行,并不影响阅读的!

纠正一点的是:CSS文件进行调用时并不像一楼所说!不换行可以减少代码的大小!这是毫无根据的臆断!因其会自动解释换行和空白的!代码的大小是因为我们写了一些没有必要的东西所形成的时空代价,比如在body中已经有font-size:9pt而在BODY中的一个DIV中,如果要设置字体为9pt时没有必要再定义font-size:9pt了,如果再定义就是出现代码时的增大。还有一些默认也没有必要写出。

如果真如一楼所说,我想问一下一楼:你知道吗,在CSS中是可以加注释的,请问注释会不会增加代码量?答案是不会!因为其不运行!

sorry,对不起楼上,我说的是运行方面的,没有说下载方面的事。恕我直言,如果有一个人一个不足0。2K的CSS而写了N个GB的注释的话,那他一定有病了!注释不是发文章,一个CSS文件最多能有多少注释?不过我经常遇到写好的CSS进行压缩加密的情况,为了防止别人偷看,至于说能有多少,一个回车只是一个字符,占8bits,一个byte,请问一下,连写与其能有多大分别?再者请问一下为什么还要分开写呢?这是代码的维护时很难读懂的情况下还要讲时间代价吗?

程序的时空代价是指:运行时间与编写时间的相比,存储空间与运行空间的对比。

对于离散型网页来说,下载页面的同时还在下载CSS文件,而且CSS会放在机器的临时文件夹中,这样,整个网站也用不了下载几个CSS,且下次打开网页不须再下CSS。这样你认为呢?