B2B商务网

微信扫一扫

微信小程序
天下好货一手掌握

扫一扫关注

扫一扫微信关注
天下好货一手掌握

网站页面建设:教你如何规范命名css

   2023-03-23 IP属地 广东佛山建站助手360
核心提示:网站页面建设:教你如何规范命名css:css3已经发布了,许多WEB前端工程师都开始尝试使用该技术了。我们怎样来评价编写css的能力呢?不会用对与错来判断,我们可能会用“好”、“一般”、“很烂”等字眼来形容。CSS最难的是什么呢?是各大浏览器的兼容?是代码的简洁高效性?前端工程师五指曾说过:css
网站页面建设:教你如何规范命名css:

css3已经发布了,许多WEB前端工程师都开始尝试使用该技术了。我们怎样来评价编写css的能力呢?不会用对与错来判断,我们可能会用“好”、“一般”、“很烂”等字眼来形容。CSS最难的是什么呢?是各大浏览器的兼容?是代码的简洁高效性?前端工程师五指曾说过:css不是什么难的技术,难点在于怎样规范的命名。项目由个人完成,工程师可以依据自己的习惯来命名css。在团队合作中,不规范的命名侧可能会引发起冲突,从而影响到整个项目的进度。下面岭南网络手把手教大家如何规范的命名css。

划分css可以有多种角度,如按功能划分:将字体的css存放在font.css;将控制颜色的css存放在color.css;将控制布局的css存放在layout.css;或者按区块划分:将头部的css存放在header.css;将底部的css存放在footer.css;将侧边栏存放在sidebar.css;将主题存放在main.css。不同的角度有划分都有自己的利与弊。

岭南网络给大家推荐一种css的划分方法:base.css+common.css+page.css。将一个网站所有的样式,按职能分成三大类:base、common、page,在任何一个网页最终样式表现都由这三者完成的。

base层是网站页面样式所需依赖的最底层,相对稳定基本不用维护。我们一般会在base.css存放以下内容。

body,div,dl,dt,dd,dl,ol,ul,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td,{margin:0;padding:0;}

table{border-collapse:collapse;border-spacing:0;}

ol ul{list-style:none;}

.f12{font-size:12px;}

.f13{font-size:13px;}

.f14{font-size:14px;}

.tl{text-algin:left;}

.tc{text-algin:center;}

.tr{text-algin:right;}

.w10{width:10px;}

.h10{height:10px;}

.m10{margin:10px;}

.ml10px{margin-left:10px;}

.p10{padding:10px;}

.pr10{padding-right:10px;}

common层是位于中间层,提供组件级的CSS。我们可以将页面内的元素拆分为一小块一小块的功能和样式相对独立的“模板”,这些模板有些是很少重复的,有些会是大量重复的,我们可以将大量重复的样式提取出来存放在common.css样式中。如一个网站要用到很多重复的标题,我们就可以这样来编写:

.h2{font-size:14px;font-weight:bold;}

page层是页面级的,建议将所有page层的css都存放在page.css里,可根据页面配上注释,分块书写,便于维护。如:

.about-text{font-size:12px;}

.contact-text{font-size:14px;}

base层基本上是不用维护的,common层修改的幅度不会很大,page层代码可能有多个工程师开共同开发,那要如何避免冲突呢?我们可以通过命名来避免冲突。可以将css命名规范为:骆驼命名法和划线命名法。骆驼命名法:从第二个单词开始,将每个单词的首字母大写。如dropMenu、subNavMenu.划线命名法:用中划线-,或者下划线_分隔,如drop-menu、sub_nav_menu。

如果项目是由多个工程师来完成的,我们可以给每一个人分配一个独立的命名ID。如岭南网络叫linknan,我们可以把名字开头的2个字母分配为独立命名id,如:.ln-artice li。这样就可以避免重复命名而产生冲突。

以上心得只是给大家一些启发,希望各位活学活用。文章由岭南网络 发布,转载请保留链接。

 
举报收藏 0打赏 0评论 0
免责声明
• 
本文源自建站助手发布的内容,本站会员编辑发布。
本网站对站内所有资讯的内容、观点保持中立,不对内容的准确性、可靠性或完整性提供任何明示或暗示的保证。
本网站部分内容来源于合作媒体、企业机构、网友提供和互联网的公开资料,版权归原作者所有,如有侵权等问题,请及时联系我们,我们将在收到通知后第一时间妥善处理该部分内容。info@1688b2b.com。

转载请注明原文出处: http://www.1688b2b.com/news/show-13039.html

 
更多>同类资讯文章
推荐图文
推荐资讯文章
点击排行
信息二维码

手机扫一扫

快速投稿

你可能不是行业专家,但你一定有独特的观点和视角,赶紧和业内人士分享吧!

我要投稿

投稿须知

【行业知识,产业动态、产品指南、产品应用等原创性内容优先审核发布。】
1、提交粗糙的广告软文或者对用户无任何帮助、无价值的文章将无法被通过审核。
2、发布内容时请选择合适的栏目归档。
3、严禁类同内容重复发布及标题堆砌关键字。
4、文章内容须与标题有一定相关性。
5、排版精美工整用户才愿意去看
6、以上不合规一律不予审核直接删除
7、审核时间一般24小时内,优质文章优先审核