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存放以下内容。
/*css reset 因为每个浏览器都会对一些标签属性有默认预设值,所以要要把一些标签属性统一设置*/
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
相关文章
css 盒模型 子元素 margin 影响父元素怎么办_通过建立新的块级上下文解决
css如何表示当前主题颜色_使用css变量结合rgb值
css渐变背景影响性能怎么办_使用简单rgb颜色减少重绘
css 过渡与 display:none 的结合_实现元素的显示与隐藏过渡
css固定定位元素在滚动时不动怎么办_使用position: fixed实现
相关标签:
本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门AI工具
相关专题
C++ 设计模式与软件架构
本专题深入讲解 C++ 中的常见设计模式与架构优化,包括单例模式、工厂模式、观察者模式、策略模式、命令模式等,结合实际案例展示如何在 C++ 项目中应用这些模式提升代码可维护性与扩展性。通过案例分析,帮助开发者掌握 如何运用设计模式构建高质量的软件架构,提升系统的灵活性与可扩展性。
14
2026.01.30
热门下载
精品课程
相关推荐
/
热门推荐
/
最新课程
最新文章









