最初使用CSS来控制网站样式的时候,并不清楚CSS管理规划之类的东西,所写的CSS基本上都是按照需要,随时添加,刚开始还不觉得有什么不好,但是后来越加越多,越改越乱,虽然有一些注释,但到最后还是变得让我自己看着都头疼。那个时候,一个网站所有的CSS都在一个文件中,没有规划,并且排序也没多少规律,于是只能在html页面中找到class的名称,然后在上千行的css代码中搜索自己想要的那个。
过了一段时间,思考总结之后,我对站点的CSS样式表进行了初级的规划。在样式表中初步划分了三个区域:
base 样式表
layout 样式表
class 样式表
其中“base 样式表”用来描述一些公共性的东西,比如全局性的body、a样式等;“layout 样式表”用来描述具有唯一性的id布局,属于整个页面的框架式布局;“class 样式表”用来描述剩下的class类的样式,这类样式分为可复用样式和通常只在特殊页面出现一次或几次的样式。
按照这种方法布局的确提高了不少的效率,但这种方式只适合中小型网站,在大型网站上应用还是略显单薄,至少在多人协作的时候并不能达到最佳效率。于是就有了下面总结的较完善的CSS管理规划模式。
较完善的CSS样式表管理模式
step1:个人或者团队需要将主要页面的布局用DIV图的模式按层次画出来,这个DIV图就是在设计原型的基础上,将页面中的主要模块使用的ID名、class名标注出来,方便建立维护文档以便将来进行修改与升级。
step2:划分CSS结构,建立全局css及各模块css。在html页面中引用全局css,在全局css中引用各模块css。
建立global.css为全局css,在全局css中定义“* { … } body { … }”之类的全局样式。
在全局样式中通过“@import url(”xxx.css”);”引入模块css。
关于模块CSS的划分,我比较喜欢类似wordpress中的css划分方式,一般情况下通过类似下列结构划分:
layout.css /* 整站布局 */
public.css /* 公用组合样式 */
header.css /* 页面头部区域样式 */
sidebar.css /* 侧边栏区域样式 */
main.css /* 主体区域样式 */
footer.css /* 底部区域样式 */
index.css /* 首页区域特有样式 */
form.css /* 表单类样式 */
解释一下,layout.css负责整个网站的布局,比如#header, #footer等布局的基本位置及样式设计;public.css负责一些公用样式定义,因为一个class中可以使用class=”navbar font12px”这种利用中间空格分隔的方法来应用多个class样式,所以可以定义一些比较常用的或者在特殊情况下需要修改的公用class,方便局部微调;header.css、sidebar.css、footer.css等模块是对应头部、侧边栏、底部模块的css样式表,可以根据网站的具体需求来增减模块;index.css是一些首页特有元素的css,因为首页的特殊性,我们在设计css的时候通常对首页进行特殊处理,一般情况下,首页是css最复杂的一个页面,有必要对首页的独有css元素进行归类放置,也可以不用@import引入index.css,而把它单独放到首页引用;form.css是表单元素的样式表,表单虽然不难,但控制起来还是比较麻烦的,单独放到一个css文件里方便控制,当然,类似的其他元素你也可以这么处理。
step3:在各个样式表文件中写入样式。
分享到:
相关推荐
CSS样式表学习经验总结,能帮助所有学习CSS样式表的爱好者学习,很不错
比较全面的css参考手册,实用, 很多是前辈的经验总结,有需要的朋友可以使用,很珍贵的资源 初入门的朋友,还有不想看英文文档的朋友,有需要的朋友可以使用,很珍贵的资源
《精通CSS+DIV网页样式与布局》系统地讲解了CSS层叠样式表的基础理论和实际运用技术,通过大量实例对CSS进行深入浅出的分析;着重讲解如何用CSS+DIV进行网页布局,注重实际操作,使读者在学习CSS应用技术的同时,...
css学习最强总结笔记 适合入门小白理解和有经验的作为快速查找使用 分门别类 易于理解 深入浅出 总结到位 点到核心 没有废话 持续更新中
div+css布局页面的使用经验总结,包括div设置,css样式表修饰div块进行页面的布局等等。
《精通CSS+DIV网页样式与布局》系统地讲解了CSS层叠样式表的基础理论和实际运用技术,通过大量实例对CSS进行深入浅出的分析;着重讲解如何用CSS+DIV进行网页布局,注重实际操作,使读者在学习CSS应用技术的同时,...
《精通CSS+DIV网页样式与布局》系统地讲解了CSS层叠样式表的基础理论和实际运用技术,通过大量实例对CSS进行深入浅出的分析;着重讲解如何用CSS+DIV进行网页布局,注重实际操作,使读者在学习CSS应用技术的同时,...
对于现在的web2.0,到底怎么书写css样式表,才算是最好的,最规范的!几乎没有什么明确的规定。在整个开发的项目中,只要写出一套最适合于团队开发的最好了。当然了很多的css样式书写范是大同小异的。需要不断的去...
让你使用DIV CSS排版 不是让你用换个标签然后再...2:避免滥用类 当类型的结构需要不一样的表现时 记得什么是层叠样式表 具体结构中的p a h1等可使用如下方式:div.sideBar p{}定义即后代选择器 ID或类选择器组合方式。
这些是参考了国外一些文章以及我的个人经验总结出来,我想对写CSS的前端用户来说是值得学习的。 一、CSS书写顺序 1.位置属性(position, top, right, z-index, display, float等)2.大小(width, height, padding, ...
Introduction To CSS2样式表简介 说明: 本手册针对的是已有一定网页设计制作经验的读者。其目的是提供最新最全的样式表内容的快速索引及注释。所以对于样式表的基础知识,在此仅简单介绍,恕不赘述。 本手册的升级...
前言 Sass是CSS3语言的扩展,它能帮你更省事地写出更好的样式表,使你摆脱重复劳动,使...在项目中,我们使用支持传统的类CSS语法—— Scss,所以以下项目经验总结分享以Scss为例。 1、变量 $ 使用 我们可以通过变量
SQL Server数据库安全规划全攻略 .net通用数据库访问组件SQL Artisan应用简介1 在Framework1.0下同时连接SqlServer和Oracle的一些体会 XML XPath XPath最通俗的教程(ZZ) XPath中相对路径和绝对路径 XPath 简单语法...
6.4 使用css渐变进行样式化 138 6.5 总结 141 第7章 创建可主题化的设计 143 7.1 主题基础知识 144 7.2 主题和调色板 145 7.3 主题默认值 148 7.4 主题继承 150 7.5 自定义主题 154 7.6 ...
天下萤商贸有限公司实习总结 一、实习目的 随着经济高速发展,社会的竞争也越来越激烈。适者生存,对于初出茅庐的... (2)、使用DIV+CSS样式及基础的HTML语言做页面布局的排版。 (3)、PS网页配色及排版设计。通过色
开发者不需要编写复杂的javascript,也不需要对css样式有深入的了解,开发者需要了解的只有一些简单的html标签。 jQuery EasyUI为提供了大多数UI控件的使用,如:accordion,combobox,menu,dialog,tabs,...
4.2.2 使用层叠样式表改变样式 88 4.3 HTML服务器控件 93 4.3.1 HtmlControl基类 95 4.3.2 HtmlContainerControl类 96 4.3.3 所有的HTML类 96 4.3.4 使用HtmlGenericControl类 97 4.4 通过JavaScript处理页面...
CSS大家很熟悉了,全称是Cascading Style Sheets(层叠样式表),是目前用来在浏览器上显示XML文档的主要方法。 3.Behaviors Behaviors现在还没有成为标准。它是微软的IE浏览器特有的功能,用它可以对XML标识设定...