0

0

规范命名css

高洛峰

高洛峰

发布时间:2016-11-24 10:14:40

|

1741人浏览过

|

来源于php中文网

原创

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。这样就可以避免重复命名而产生冲突。

多多校园网络店铺
多多校园网络店铺

v3.3增加是否允许用户注册选项,重些登陆验证代码,取消SessionTimeout设置,改成前后台登陆验证设置,重写短消息单元,所有短信功能在个页面完成,更改相关短信连接和图片设置,美化相关小图片,修正若干个小问题,全新界面正装上市丰富用户字段,重命名相关文件,以方便使用管理,适合开发规范,重写修改密码,修改资料,店铺标志上传,店铺公告,店铺连接代码,店铺资料修改,商品发布、修改、删除功能,二手

下载

相关专题

更多
php源码安装教程大全
php源码安装教程大全

本专题整合了php源码安装教程,阅读专题下面的文章了解更多详细内容。

150

2025.12.31

php网站源码教程大全
php网站源码教程大全

本专题整合了php网站源码相关教程,阅读专题下面的文章了解更多详细内容。

88

2025.12.31

视频文件格式
视频文件格式

本专题整合了视频文件格式相关内容,阅读专题下面的文章了解更多详细内容。

90

2025.12.31

不受国内限制的浏览器大全
不受国内限制的浏览器大全

想找真正自由、无限制的上网体验?本合集精选2025年最开放、隐私强、访问无阻的浏览器App,涵盖Tor、Brave、Via、X浏览器、Mullvad等高自由度工具。支持自定义搜索引擎、广告拦截、隐身模式及全球网站无障碍访问,部分更具备防追踪、去谷歌化、双内核切换等高级功能。无论日常浏览、隐私保护还是突破地域限制,总有一款适合你!

61

2025.12.31

出现404解决方法大全
出现404解决方法大全

本专题整合了404错误解决方法大全,阅读专题下面的文章了解更多详细内容。

493

2025.12.31

html5怎么播放视频
html5怎么播放视频

想让网页流畅播放视频?本合集详解HTML5视频播放核心方法!涵盖<video>标签基础用法、多格式兼容(MP4/WebM/OGV)、自定义播放控件、响应式适配及常见浏览器兼容问题解决方案。无需插件,纯前端实现高清视频嵌入,助你快速打造现代化网页视频体验。

16

2025.12.31

关闭win10系统自动更新教程大全
关闭win10系统自动更新教程大全

本专题整合了关闭win10系统自动更新教程大全,阅读专题下面的文章了解更多详细内容。

12

2025.12.31

阻止电脑自动安装软件教程
阻止电脑自动安装软件教程

本专题整合了阻止电脑自动安装软件教程,阅读专题下面的文章了解更多详细教程。

5

2025.12.31

html5怎么使用
html5怎么使用

想快速上手HTML5开发?本合集为你整理最实用的HTML5使用指南!涵盖HTML5基础语法、主流框架(如Bootstrap、Vue、React)集成方法,以及无需安装、直接在线编辑运行的平台推荐(如CodePen、JSFiddle)。无论你是新手还是进阶开发者,都能轻松掌握HTML5网页制作、响应式布局与交互功能开发,零配置开启高效前端编程之旅!

2

2025.12.31

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Sass 教程
Sass 教程

共14课时 | 0.7万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 2.7万人学习

CSS教程
CSS教程

共754课时 | 17.4万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号