200分求一个团队开发中的css命名规范(word的)

shoutor 2007-01-23 05:49:00
请先回复,然后短消息联系我,谢谢
...全文
1489 36 打赏 收藏 转发到动态 举报
写回复
用AI写文章
36 条回复
切换为时间正序
请发表友善的回复…
发表回复
facebookdotcom 2008-12-20
  • 打赏
  • 举报
回复
uno 2007-01-30
  • 打赏
  • 举报
回复
如果使用asp.net,那么就最好有点大系统的架子,界面的ui属性、样式,都是“事后”设置的。过去的技术我们不提了,在asp.net2.0下你应该了解theme。

总之,程序员并不设计样式,完全可以在系统部署的时候由客户服务器部门的美工(根本不是开发部门的ui设计师)来设置的。可见开发前期去规定那个“规范”其实是项目管理流程比较低级(初级)的。
****************************************************************************************
说得有道理,但有一点不敢苟同:
界面样式可以在系统进入开发阶段之前就开始设计,可以使用事先制造的静态页面演示系统的最终效果,这些静态页面也应该成为服务器端应用程序输出html内容的“范本”
一个理想的开发模式是——界面外观与后台应用开发确定好接口(html布局、输出元素的规范),两者可以并行开发
gameboy766 2007-01-25
  • 打赏
  • 举报
回复
帮顶
glacier111 2007-01-25
  • 打赏
  • 举报
回复
帮顶
executemylove 2007-01-25
  • 打赏
  • 举报
回复
up
  • 打赏
  • 举报
回复
顶ing ...
  • 打赏
  • 举报
回复
如此辛苦地板砖 --> 如此辛苦地搬砖

很多文档都是为了骗老板多掏开发费的。真正关键的流程先要搞清楚,那么即使写文档也知道什么时候该用什么时候不该用。
  • 打赏
  • 举报
回复
如此辛苦地板砖,不忍心戳穿。

但是一点都不说明白也不行。

至少对于asp.net,我一直强调它是一个服务器程序,是用来自动化产生html的(运行时)代码生成器。如果你打算写静态页面,应该写html并且不经服务器系统处理,不应该使用如此沉重的asp.net。

如果使用asp.net,那么就最好有点大系统的架子,界面的ui属性、样式,都是“事后”设置的。过去的技术我们不提了,在asp.net2.0下你应该了解theme。

总之,程序员并不设计样式,完全可以在系统部署的时候由客户服务器部门的美工(根本不是开发部门的ui设计师)来设置的。可见开发前期去规定那个“规范”其实是项目管理流程比较低级(初级)的。
lovehongyun 2007-01-25
  • 打赏
  • 举报
回复
帮顶...
ken_flash 2007-01-25
  • 打赏
  • 举报
回复
位置+功能感觉就足够了

.HeaderLogin
{

}

.LeftLogin
{}
yan63 2007-01-25
  • 打赏
  • 举报
回复
[zt]:源不明
-----------------------------
大致看了一下,写得有点乱,好多地方都有重复,不过可以重复加深记忆,懒得弄了,你们照看吧。我也是ZT别人的。

程序代码
专栏:column
元素:element
页头:header
登录条:loginbar
标志:logo
侧栏:sidebar
广告:banner
导航:nav
子导航:subnav
菜单:menu
子菜单:submenu
搜索:search
滚动:scroll
页面主体:main
内容:content
标签页:tab
文章列表:list
提示信息:msg
小技巧:tips
栏目标题:title
加入:joinus
指南:guide
服务:service
热点:hot
新闻:news
下载:download
注册:register
状态:status
按钮:btn
投票:vote
合作伙伴:partner
友情链接:friendlink
页脚:footer
版权:copyright

以上结构可以组合使用,例如:左列标题lefttitle;底部导航footernav 书写原则是: 1.一律小写; 2.尽量用英文; 3.不加中杠和下划线; 4.尽量不缩写,除非一看就明白的单词

外围wrap
列一 column-one
列二 column-two

头:header
内容:content/container
尾:footer
导航:nav
侧栏:sidebar
栏目:column
页面外围控制整体布局宽度:wrapper
左右中:left right center

命名全部使用小写字母,如果需要多个单词,单词间使用“-”分隔,比如user-list

css书写规范

一、 基本书写规范  

1、所有的CSS的尽量采用外部调用
   <LINK href="style/style.css" rel="stylesheet" type="text/css">
  
  书写时重定义的最先,伪类其次,自定义最后(其中a:link a:visited a:hover a:actived 要按照顺序写)便于自己和他人阅读。
  
  为了保证不同浏览器上字号保持一致,字号建议用点数pt和像素px来定义,pt一般使用中文宋体的9pt和11pt,px一般使用中文宋体12pt 和14.7px 这是经过优化的字号,黑体字或者宋体字加粗时,一般选用11pt和14.7px 的字号比较合适。
  
2、CSS推荐模板:
  
<style type="text/css">
<!—
body { font-size:9pt; font-family:Arial, Helvetica, sans-serif; color:#333333; text-align:center; margin:0px;}
ul { margin:auto; }
img { border:0px; }
a { font-size:9pt; text-decoration:none;color:#FFFFFF; }
a:hover { font-size:9pt; text-decoration:underline; color:#990000; }
a.1 { font-size: 9pt; color: #3366cc; text-decoration: none}
a.1:hover { font-size: 9pt; color: #FF9900; text-decoration: none}

.colorblue,colorblue:hover { color:#003366 ;}
.blue { font-family: "宋体"; font-size: 9pt; line-height: 20px; color: #0099FF; letter-spacing: 5em}

.colorRed,a.colorRed:hover{ color: #FF0000; }
.colorLime,a.colorLime:hover{ color: #00FF00; }
.colorGreen,a.colorGreen:hover{ color: #008000; }
.colorBlue,a.colorBlue:hover{ color: #0000FF; }
.colorOrange,a.colorOrange:hover{ color: #FFA500; }
-->
</style>
  
  
  为了保证浏览器的兼容性,必须设置页面背景<body bgcolor="#FFFFFF">

3、其中注释写法,例:/*header begin!*/


二、CSS命名参考

1、常用的CSS命名规则:
头:header
内容:content/container
尾:footer
导航:nav
侧栏:sidebar
栏目:column

2、直观命名

当在设计Web页面以及需要对一个div进行标识的时候,最自然的想法就是使用可以描述元素所在页面位置的词汇来对其命名。这种方法使得类以及id的名称如下面所示:

自上而下小组:top-panel

横向:horizontal-nav

左面:left-side

中心-栏目:center-column

右面:right-col

这些是CSS以及XHTML类和id的有效命名方式。这些词汇简单并且能够使人顾名思义,因此满足了标识页面元素以及相应的CSS样式的需要。

但问题是这样的名称同页面内容的特定表达方式相关联。这些命名参考了某种特定页面布局中的页面元素位置,因此在这样的布局之外使用就会显得不合适甚至造成理解混乱。同时,这些命名没有涉及文档内容的结构。因此,下面给出了对CSS类以及ID命名更好的方法。

3、结构化命名

结构化的标记意味着表达方式/位置信息同内容的完全分离——这其中包括出现在标记(markup)中的类和id名称。

有标记的相关信息都是用来描述文档的结构而不是外观。这样的特点使得我们可以通过简单的改变CSS的方式来对不同外观格式下的内容(content)以及标记(markup)进行重用。当你理解这种方式时,很容易就可以发现采用页面位置来为类以及id命名的方式在处理如音频(audio)等外观格式上显得非常不合适。因此,应当根据在文档中的使用目的而非出现位置来对类以及id进行结构化命名。

可以按照如下所示的结构化方式来对类以及id名称命名:

顶部抢眼部分:branding

导航部分:main-nav

主要内容部分:main-content

这些名字同直观命名方式一样非常易懂,但他们描述了页面元素的作用而非位置。这使得代码更加符合使用纯粹的结构化标记(structural markup)的初衷,即开发人员可以在不改变标记的情况下对各种各样媒体下的显示格式进行处理。

即使你不打算在其他的媒体上对Web页面进行格式修改,使用结构化命名方式还可以帮助你在日后的站点升级或重新设计中更为轻松。例如,结构化命名避免了当一个div同id right-column移动到页面左边后所带来的混乱。对div sidebar的采用这样的命名方式就显得更加适当,因为无论它出现在页面的哪一边,这个名字仍然对开发人员来说直观易懂。

4、惯例

Andy Clarke分析了40份由推崇标准化Web设计理念的开发人员所设计的Web站点的源代码。尽管类以及id名称很不统一,但是还是发现了一些频繁出现的常用名称。这里给出了最常用类/id名称的示例列表:

header

content

nav

sidebar

footer

如果要查看完整的列表,可以看看最常见命名惯例表

这些常见的类以及id名称是否标志着一种标准的诞生或是普遍接受惯例的形成呢?尽管这是我所希望的,但我并不这么认为。我的确希望能够看见一整套对于我们每天都可以看到的常用页面元素的命名标准。同时,使用标准化的命名方式可以使得寻找页面元素以及对Web站点升级带来方便,尤其当需要在由不同开发人员在不同时间所开发站点中换来换去工作的时候。

review:

大的布局div可以以外观的方式命名(如header,footer),其他的我觉得还是应该以描述所含内容的标准来命名(如menu,news)

5、自定义命名:

根据w3c网站上给出的,最好是用意义命名
比如:是重要的新闻高亮显示(像红色)
有两种
.red{color:red}
.important-news{color:red}
很显然第二种传达的意义更加明确,所以尽量不要用意义不明确的作为自己自定义的名字



三、CSS样式书写顺序

1、显示属性
* display * list-style * position * float * clear

2、自身属性
* width * height * margin * padding * border * background

3、文本属性
* color * font * text-decoration * text-align
* vertical-align * white-space * other text * content
lxmfll2000 2007-01-24
  • 打赏
  • 举报
回复
顶一下!
shoutor 2007-01-24
  • 打赏
  • 举报
回复
有吗,顶一下
lubosun 2007-01-24
  • 打赏
  • 举报
回复
CSS都用小写就行了
ice_frank 2007-01-24
  • 打赏
  • 举报
回复
UP
阿良chjlcn 2007-01-24
  • 打赏
  • 举报
回复
http://www.chenjiliang.com/Article/View.aspx?ArticleID=540&TypeID=30
zhaozhao110 2007-01-24
  • 打赏
  • 举报
回复
类型命名不好吗?
liucom 2007-01-24
  • 打赏
  • 举报
回复
注意要添加注释,另外每个某块的东西放在一起。。
极客行天下 2007-01-24
  • 打赏
  • 举报
回复
up
lxxszw 2007-01-24
  • 打赏
  • 举报
回复
up
加载更多回复(15)

62,074

社区成员

发帖
与我相关
我的任务
社区描述
.NET技术交流专区
javascript云原生 企业社区
社区管理员
  • ASP.NET
  • .Net开发者社区
  • R小R
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告

.NET 社区是一个围绕开源 .NET 的开放、热情、创新、包容的技术社区。社区致力于为广大 .NET 爱好者提供一个良好的知识共享、协同互助的 .NET 技术交流环境。我们尊重不同意见,支持健康理性的辩论和互动,反对歧视和攻击。

希望和大家一起共同营造一个活跃、友好的社区氛围。

试试用AI创作助手写篇文章吧