HTML naming CSS writing order_html/css_WEB-ITnose

HTML CSS

在XHTML中定义ID时都用得上，主要是方便CSS定义样式时能一眼看穿。所以，CSS命名仅作参考。(1)页面结构类容器: container页头：header内容：content/container页面主体：main页尾：footer导航：nav侧栏：sidebar栏目：column页面外围控制整体布局宽度：wrapper(2)导航类导航：nav主导航：mainnav子导航：subnav顶导航：topnav边导航：sidebar左导航：leftsidebar右导航：rightsidebar位置导航： crumb菜单：menu子菜单：submenu面包屑：breadcrumb(即页面所处位置导航提示)(3)网页内容类标题: title摘要: summary箭头： arrow商标： label网站标志： logo转角/圆角： corner横幅广告： banner子菜单： subMenu搜索： search搜索框： searchBox登录： login登录条：loginbar工具条： toolbar下拉： drop标签页： tab当前的： current列表： list滚动： scroll服务： service提示信息： msg热点：hot新闻： news小技巧： tips下载： download栏目标题： title热点： hot加入： joinus注册： regsiter指南： guide友情链接： friendlink状态： status版权： copyright按钮： btn合作伙伴： partner投票： vote左右中：left right center(二)注释的写法:/* Footer */内容区/* End Footer */(三)id的命名:(1)页面结构容器: container页头：header内容：content/container页面主体：main页尾：footer导航：nav侧栏：sidebar栏目：column页面外围控制整体布局宽度：wrapper左右中：left right center(2)导航导航：nav主导航：mainbav子导航：subnav顶导航：topnav边导航：sidebar左导航：leftsidebar右导航：rightsidebar菜单：menu子菜单：submenu标题: title摘要: summary(3)功能标志：logo广告：banner登陆：login登录条：loginbar注册：regsiter搜索：search功能区：shop标题：title加入：joinus状态：status按钮：btn滚动：scroll标签页：tab文章列表：list提示信息：msg当前的: current小技巧：tips图标: icon注释：note指南：guild服务：service热点：hot新闻：news下载：download投票：vote合作伙伴：partner友情链接：link版权：copyright(四)class的命名:(1)颜色:使用颜色的名称或者16进制代码,如.red { color: red; }.f60 { color: #f60; }.ff8600 { color: #ff8600; }(2)字体大小,直接使用"font+字体大小"作为名称,如.font12px { font-size: 12px; }.font9pt {font-size: 9pt; }(3)对齐样式,使用对齐目标的英文名称,如.left { float:left; }.bottom { float:bottom; }(4)标题栏样式,使用"类别+功能"的方式命名,如.barnews { }.barproduct { }注意事项::1.一律小写;2.尽量用英文;3.不加中杠和下划线;4.尽量不缩写，除非一看就明白的单词.推荐的 CSS 书写顺序//显示属性displaylist-stylepositionfloatclear//自身属性widthheightmarginpaddingborderbackground//文本属性colorfonttext-decorationtext-alignvertical-alignwhite-spaceother textcontent

Reply to discussion (solution)

Thanks to the poster for the points

The name is too long. . What should be the correct name for the ones that are layered within one layer?

Great!

I like it so much.

Haha I have saved it, so I won’t worry about naming it in the future! Thank you!

What are breadcrumbs?


Copyright: copyright There is a volume C character after it.

How to display it?

Learned, Awesome

Some use camel case, some don't, it's not uniform.

Good stuff. Take the points

I don’t really like humps.

This is good, code writing must be standardized

No matter what language the code is written in, naming is always a headache~~

Very good, thank you!

It’s pretty good, support it. Specifications

Very good, collected.

Collection, received points.

Thanks for organizing and sharing

It’s useful, I hope it’s the first time to score!

I was looking for this

For reference, naming is indeed a headache

Very practical thing!

This is still very useful

This is good, naming is always a headache.

Thanks to the original poster. . .

That’s great,,, I finally know how to name it

Very attentive poster, I hope we can encourage each other by sharing resources in the future,

Thank you, poster! ! !

Learned, thank you

(1) Color: Use the name of the color or hexadecimal code, such as

.red { color: red; }
. f60 { color: #f60; }
.ff8600 { color: #ff8600; }

(2) Font size, directly use "font font size" as the name, such as

. font12px { font-size: 12px; }
.font9pt {font-size: 9pt; }

(3) Alignment style, use the English name of the alignment target, such as

.left { float:left; }
.bottom { float:bottom; }

The naming method here is not recommended. It should be named according to function or structure, not performance.
For example, .red { color: red; } If you want to change the color to green, wouldn’t it become .red { color: green; }?
This will be confusing to the developers behind.

Very good and powerful

Thank you...

Hmm I never paid much attention