如何合理命名CSS文件——摘自网友
有经验的网页制作者都明白,对于有多个栏目的大型网站而言,使用单一的CSS文件是不可能的。但CSS文件名如何命名对于新手来说是件容易出乱子的事。如何才能将CSS的命名做得井井有条? 坚持使用统一的CSS命名规则并养成习惯,可以让你更容易维护、修改以前编写过的CSS代码,从而提高自己的工作效率。而且还能加强搜索引擎优化,方便记忆。 ? 首先,CSS文件必须统一放在一个目录下,比如style、css等。 其次,在给CSS文件进行命名时,经常使用符合语义的英文名字,实在不行再使用拼音命名。在命名时,将影响全局的CSS和基础定义写在base.css或basic.css文件中,布局内容写在在layout.css文件中,如果有需要,还可以将定义字体的css内容单独写在font.css文件中,然后针对网站的每个栏目单独写一个以栏目名称命名的CSS文件。不过通常在全局定义的内容不多的情况下,我会将布局内容和字体内容写在base.css或basic.css文件中。 最后,在给CSS里的class和id命名时,使用英文名或者英文名字的组合,另外,在有从属关系的class里,我们可以充分利用组合名称。 通常组合名称有三种写法: 第一种用中横线“-”来连接前后单词作为组合,比如“#space-banner”; 第二种利用下划线“_”进行连接,比如“#space_banner”; 第三种方法是将第二个单词的首字母进行大写,比如“#spaceBanner”,这种写法也叫做驼峰式(camel case),但需要注意的是,由于CSS里是区分大小写的,所以spaceBanner和spacebanner是两个不同的CSS名字。 这三种方法使用哪种都可以,因人而异,但只要采用其中一种,那么全部的CSS文件都应该遵循这个规范,这样才能统一风格。 下面我们还是以阿邦网为原型举个简单点的例子来详细说名一下吧。 首先分析一下阿邦网的基本结构和页面数量及页面名称。 阿邦网的文章公分七大类,所以加上首页在内一共有八个一级栏目,即首页、时尚、美食、健康、兴趣、宠物、数码、旅游八个。每个一级栏目下又有若干个二级页面,就是作者们各自的首页,这些页面长的全部一样,所以它们共用的是同一个页面模板,只用一个CSS文件即可。 每个作者还有自定义的分类,算是三级页面,它们也是共用相同的页面模板。除此外还有一个全部文章列表页面和文章的展示页面。这样草草算来大约共有12个页面,就先停到这里,更深层的那些页面可能更多,暂时先不追究了。下面我们对它们所要用到的CSS文件进行分配。 第一步,我们肯定需要一个全局定义的CSS文件来定义整个网站的字体大小、颜色、背景、行高、列表样式、按钮样式、表格样式等等,那么就有了base.css文件。 第二步,一个网站必然会有它的页面头和版权信息,我们将定义页面头部信息的CSS文件起名为header.css,版权信息也可以叫做页脚,起名为copyright.css或footer.css文件。因为阿邦网的版权信息不算多,我就把页脚信息加在了header.css文件中合并成一个文件。 第三步,命名所有一级栏目的CSS文件,共有首页、时尚、美食、健康、兴趣、宠物、数码、旅游八个栏目,分别定义为index.css、fashion.css、food.css、health.css、hobbies.css、pets.css、digital.css、travel.css。 第四步,命名所有二级栏目的CSS文件,它们是作者首页,作者自定义的分类页,分别定义为author_index.css和author_cate.css。 第五步,命名所以三级栏目的CSS文件,有文章列表页和文章展示页(底级页),分别定义为lists.css和detail.css。 这样一共就出现了14个CSS文件,如顶部图一,一定有人会问为什么怎么这么多?其实对于一个大型网站来讲,这一点也不多,而且是有必要的。当然这些CSS文件不用一次性全部新建出来,只需要制作到那个页面的时候再建立即可,但是在初步规划的时候一定要预想到,正所谓未雨绸缪嘛。
下面我们再用首页举例讲解一下页面的CSS文件中class和id的写法,如图二所示,阿邦网首页的主要区块都已经标注在图中,并且已经按照我的习惯取了名字。#header和#footer可以写在header.css文件中。通用的页面定义CSS内容写在base.css文件中,其余都可以写在index.css文件中。 首先整个页面是有固定宽度的,所以需要在页面最外面设置一个容器,让其居中显示,并让所有内容被包含于其中,我们一般起名为#wrap。 由于首屏焦点图(蓝色区域)内容比较多,必然会用到float属性进行布局,为了使它发挥正常,不造成错位,需要在首屏位置外部再加上一个外套,这里命名为.box,使用class的原因是后面还需要用到它,并且会出现很多次。 其它的部分很显而易见了,就不意义说明了。最后生成的Html文件应为:
<div id="wrap"> <div class="box"> <div id="focus">焦点图</div> <div id="header">页面头</div> <div class="box"> <div id="top_recommend">顶部推荐</div> <div id="stars">本周之星</div> </div> <div id="search">搜索</div> </div> <div id="img_recommend">图片推荐</div> <div class="box"> <div id="main_content">主要内容</div> <div id="side_bar">侧边栏</div> </div> <div id="footer">版权信息</div> </div>CSS的命名方法基本上就是这样了,但这不是唯一的方法,每个人习惯不同,所以命名也一定不会相同,好的方法还有很多 ,需要大家自己去摸索,我们的最终目的就是结构清晰,修改方便。 下面给大家列出网络上搜来CSS命名规则,仅供参考。 CSS文件名: Base或Basic - 基本样式。 Layout - 全部页面布局。 除非改变布局否则不修改此文件。 General - 颜色,风格,排版,非结构的布局。本文件可据需要经常编辑。 Forms - 表单的布局和风格。如果需要可以为不同的页面而分别制作表单的css文件。 Index或Home - 用来控制主页而不考虑其他页面的样式。 Print - 基本的打印样式。 Themes - 主题样式表。 Master - 主要的CSS样式。 Font - 字体样式表。 样式命名: 外 套: wrap 主导航: mainnav 子导航: subnav 页 脚: footet 整个页面: content 页 眉: header 页 脚: footer 标 题: title 主导航: mainbav(globalnav) 顶导航: topnav 边导航: sidebar 左导航: leftsidebar 右导航: rightsidebar 旗 志: logo 标 语: banner 菜单内容1: menu1 content 菜单容量: menu container 子菜单: submenu 边导航图标:sidebarIcon 注释: note 面包屑: breadcrumb(即页面所处位置导航提示) 容器: container 内容: content 搜索: search 登陆: Login 功能区: shop(如购物车,收银台) 当前的 current
如何合理命名CSS文件——摘自网友的更多相关文章
- 10个CSS简写/优化技巧-摘自网友
10个CSS简写/优化技巧23来源/作者:未知 类别:前端开发 字体大小:大|中|小 背景颜色:蓝|白|灰 ? ? CSS简写就是指将多行的CSS属性简写成一行,又称为CSS代码优化或CSS缩写.CS ...
- 巧用CSS文件愚人节恶搞(转)
明天就是4月1日愚人节了,也就是那个可适度开玩笑.整蛊的日子了.如果你想和那些要上网的朋友或同事开个极客式玩笑,那就来试试这个国外网友Wes Bos分享的 CSS 文件吧. 一.打开浏览器的 Cust ...
- 开箱即用 - Grunt合并和压缩 js,css 文件
js,css 文件合并与压缩 Grunt 是前端自动化构建工具,类似webpack. 它究竟有多强悍,请看它的 介绍. 这里只演示如何用它的皮毛功能:文件合并与压缩. 首先说下js,css 合并与压缩 ...
- 自动刷新 CSS文件
自动刷新 CSS文件 使用任何代码工具码 CSS,都是需要保存后再切换到浏览器按 F5 刷新查看效果,一次又一次,不管这个改动仅是一个小小的颜色.使用 CSSrefresh 后,改动 CSS 文件保存 ...
- HTML标签的命名/CSS标准化命名大全
在一个内容较多的HTML页面中,需要设计许多不同的框架,再为这些不同的框架及内容进行分类,给予相应的名称,从而使得网页结构更加清晰,也为工作提供了方便.许多新手朋友在设计一个HTML文件时,可能只会依 ...
- 五步整理你的css文件
鉴于实在无法忍受那种写一句就换一行的css写法,有个项目中的一个css文件竟然高达6000多行,看着实在蛋疼,无实今天下定决心整理一下,在DW里可以用正则很好的进行替换,步骤如下: 一:\r => ...
- 规范命名CSS
作者:词晖链接:https://www.zhihu.com/question/19586885/answer/48933504来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出 ...
- 使用PHP来压缩CSS文件
这里将介绍使用PHP以一种简便的方式来压缩你的CSS文件.这种方法不需要命名你的.css文件和.php文件. 当前有许多方法需要将.css文件重命名成.php文件,然后在所有PHP文件中放置压缩代码. ...
- webpack抽取CSS文件与CSSTreeShaking
webpack抽取CSS文件 CSSTreeShaking 一.webpack抽取CSS文件 抽取CSS文件的插件:mini-css-extract-plugin npm install --save ...
随机推荐
- MySQL按中文拼音排序
好多时候,我们希望查询出来的记录能够按照汉语拼音即英文的26个字母排序,但是utf字符集是外国人弄的,不是按照汉语拼音的顺序排列的,因此,我们需要将要排序的字段把编码设定为GBK或者BG2312再进行 ...
- 01: shell基本使用
目录: 1.1 编写登录欢迎脚本 1.2 重定向与管道操作 1.3 使用shell变量 1.4 特殊的shell变量 1.5 read与echo使用比较 1.1 编写登录欢迎脚本返回顶部 (1)新建脚 ...
- phpMyAdmin本地文件包含漏洞
4 phpMyAdmin本地文件包含漏洞 4.1 摘要 4.1.1 漏洞简介 phpMyAdmin是一个web端通用MySQL管理工具,上述版本在/libraries/gis/pma_gis_fact ...
- CSS3实现小黄人动画
转载请注明出处,谢谢! 每次看到CSS3动画就心痒痒想试一下,记得一个多月前看了白树哥哥的一篇博客,突然开窍,于是拿他提供的demo试了一下,感觉很棒!下图为demo提供的动画帧设计稿. 自己也想说搞 ...
- 一种新的技术,C++/CLI
一.来源 在一个项目中,拿到了一个demo,看起来像是C#,又像是C++,部分截图如下 1.界面[C#的winform] 2.mian入口,是cpp 3.解决方案 二.猜测 一开始以为是C#工程,因为 ...
- 本地连接VM virtualBox ubuntu16.04 中的Mysql数据库
1.打开mysql配置文件vim /etc/mysql/mysql.conf.d/mysqld.cnf 将bind-address = 127.0.0.1注销 2.重启ubuntu数据库 3. ...
- Delphi XE5 for Android (一)
Delphi XE5 出来了,支持Android的开发,试用了一下,有几个问题: 1.只支持ARM7的设备,不支持Inter设备.手上刚好有一个华硕K004,很遗憾用不上,只能用手机试了. 2.要支持 ...
- 蚂蚁感冒|2014年蓝桥杯B组题解析第八题-fishers
蚂蚁感冒 长100厘米的细长直杆子上有n只蚂蚁.它们的头有的朝左,有的朝右. 每只蚂蚁都只能沿着杆子向前爬,速度是1厘米/秒. 当两只蚂蚁碰面时,它们会同时掉头往相反的方向爬行. 这些蚂蚁中,有1只蚂 ...
- |和||以及&和&&
https://msdn.microsoft.com/en-us/library/6a71f45d.aspx Logical OR Operator 按位或 This operator has hig ...
- 【附8】zipkin
一.zipkin作用 全链路追踪工具(查看依赖关系) 查看每个接口.每个service的执行速度(定位问题发生点或者寻找性能瓶颈) 二.zipkin工作原理 创造一些追踪标识符(tracingId,s ...