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 过渡效果在 flex 布局下异常怎么办_确认过渡属性本身可动画
如何在CSS中制作响应式卡片墙图片缩放_flex-basis百分比与media queries结合
css 页面提示气泡如何对齐按钮_使用 relative 作为定位参考点
css响应式表单输入框宽度不自适应怎么办_使用flex basis和max width控制
css 布局一改就全乱怎么办_拆分 css 布局结构逐层控制
相关标签:
本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门AI工具
相关专题
想找真正自由、无限制的上网体验?本合集精选2025年最开放、隐私强、访问无阻的浏览器App,涵盖Tor、Brave、Via、X浏览器、Mullvad等高自由度工具。支持自定义搜索引擎、广告拦截、隐身模式及全球网站无障碍访问,部分更具备防追踪、去谷歌化、双内核切换等高级功能。无论日常浏览、隐私保护还是突破地域限制,总有一款适合你!
61
2025.12.31
想让网页流畅播放视频?本合集详解HTML5视频播放核心方法!涵盖<video>标签基础用法、多格式兼容(MP4/WebM/OGV)、自定义播放控件、响应式适配及常见浏览器兼容问题解决方案。无需插件,纯前端实现高清视频嵌入,助你快速打造现代化网页视频体验。
16
2025.12.31
想快速上手HTML5开发?本合集为你整理最实用的HTML5使用指南!涵盖HTML5基础语法、主流框架(如Bootstrap、Vue、React)集成方法,以及无需安装、直接在线编辑运行的平台推荐(如CodePen、JSFiddle)。无论你是新手还是进阶开发者,都能轻松掌握HTML5网页制作、响应式布局与交互功能开发,零配置开启高效前端编程之旅!
2
2025.12.31
热门下载
精品课程
最新文章







