在刚学习CSS初期,就接触了"模块化CSS"这样的概念,不过,一直没有很好的理解。说起来,理由很简单:因为几乎所有的代码都是为了博客的设计,
而像博客这么小的架构,CSS文件根本不用多,因为本身代码量就小,使用不同表现形式的页面模板并不多,少反而更方便管理。所以,对于模块化CSS的理解
很乱,直接导致自己一直认为下面的分法是非常合理的:
Example Source Code
[www.52css.com]
reset.css // 对浏览器的默认样式进行重设
layout.css // 管理页面的布局
typeset.css // 图文的编排与
color.css // 统一管理颜色的搭配
print.css // 打印效果样式
ie.css // 把对ie的hack单独分开
其实不然,最近工作,接触了公司的网站,leader要自己写CSS的写作规范,以及一些HTML的统一规范;并且写了新的频道/页面/卖场。才发现,
原来,上面的分法还是太理想化了。以个人来说,个人认为可以用下面的分割法。先写下,然后,让我们对比这两种分法,找到更好的解决CSS文件管理的合适的
CSS模块化分法:
Example Source Code
[www.52css.com]
reset.css
header.css // 头部的所有样式
container.css // 除头部/底部外的中间区域样式
footer.css // 底部样式
print.css
ie.css
类似wordpress中的css划分方式,一般情况下通过类似下列结构划分:
Example Source Code
[www.52css.com]
layout.css /* 整站布局 */
public.css /* 公用组合样式 */
header.css /* 页面头部区域样式 */
sidebar.css /* 侧边栏区域样式 */
main.css /* 主体区域样式 */
footer.css /* 底部区域样式 */
index.css /* 首页区域特有样式 */
form.css /* 表单类样式 */
我们可以看到,不同的有三个CSS文件。第三种分法是种不错的做法,但管理起来比较麻烦,虽然是"模块化" 了,把表现的内容的样式分开。但由于每个人都不可能百分百了解每个CSS文件里面的内容,所以,可能导致下面的问题:
一、效率问题与最终目的
在网站内容上面,如果改某一个区域的内容,可能要几个CSS都改。这样一来,本来简单的一个修改,开始变得复杂起来。并且,如果多个都改,可能会使我们忽略了某些东西,又需要进一步调试,这样不仅肯使最终目的实现延后,还是一个效率的问题。
二、调用尽可能少的CSS文件
大多楼情况下,一个网站都是分成头部,中部和底部,并且,一般,要做新的频道/页面之类的东西,都不会变动头部和底部,而只是变动中间部分。这样一来,
所有CSS文件都要调用,因为,HTML和CSS的模块化并不一致。这样,就会导致服务器承受更多的压力。这是一个方面。另一个方面是,如果新页面中某些
元素与其他页面有冲突,我们可能要搞一大堆关于优先性选择的代码,增加代码量。这些都不是我们想要的。这就为什么要把header.css和
footer.css分开来的原因。
三、多人合作上的问题
如果我们多个人在工作,大家的分工可能是,有人完成头部的导航,有
人完成底部的搜索条,有人完成中部新页面的构建。这样一来,大家都同时在改几个文件,并且,改的东西不同。如果要更新到服务器,就要先对比,再更新。(当
然,现在有版本管理这样的软件。但是,同时工作的话,版本也是一个问题,要相信,或许更新永远都改不上改变。)
结语:
当然,
上面的分法,只是一个简单的模型。不同网站的架构,可能需要更细化的分法。这里需要提醒的一点是,模块化CSS,我们应该时刻明确,我们是为了方便管理,
方便修改,方便多人合作,而不是简单的分割。如果说有什么建议,我想,CSS的模块化,应该尽量与HTML的模块化相一致。这里的一致说的是,无论是在文
件的分割上,还是在CSS内容的分割上,与HTML的模块化一致。这将会更有利于我们的工作。
分享到:
相关推荐
综上所述,"jQuery官网CSS样式复刻"项目涵盖了前端开发的关键技术,包括使用jQuery简化JavaScript编程,利用CSS实现丰富的视觉效果,通过HTML构建页面结构,以及有效地管理和整合资源。通过这个项目,开发者可以深入...
在Dreamweaver CS6中,利用内置的CSS样式表管理器,用户可以方便地创建、编辑和应用CSS样式。 #### 三、Dreamweaver CS6中的CSS样式表操作 ##### 3.1 创建CSS样式 1. **打开Dreamweaver CS6**:首先启动...
总的来说,通过CSS来设定Flash样式是一种有效的方法,它可以使网页设计更加模块化,易于管理和更新。通过研究和实践这些文件,你可以深入理解如何将CSS与Flash结合,从而提高你的网页设计技能。记住,良好的代码组织...
**【CSS样式】面板是Dreamweaver中管理CSS样式的中心位置。** 这个面板包含了所有与CSS样式相关的功能,可以帮助设计师高效地管理和创建样式。接下来我们将详细介绍该面板的功能。 **一个全能菜单:** 面板右上角有...
【网页制作CSS样式实验报告】 在网页设计与制作过程中,CSS(Cascading Style Sheets)样式扮演着至关重要的角色,它使得网页的布局、颜色、字体等视觉元素得以精确控制,实现了内容与表现的分离,提高了网页的可...
**CSS3样式表详解** CSS3,全称Cascading Style Sheets(层叠样式表),是用于描述HTML或XML...通过合理使用内联、内嵌和外部样式表,可以有效地组织和管理网页样式,提高开发效率,创造出美观且功能丰富的Web页面。
为了有效地管理和优化这些资源,开发者需要一种工具来批量下载CSS样式表中引用的图片。"批量下载CSS样式表里的图片(必备神器)" 正是这样一个工具,它能帮助开发者快速、便捷地获取所需的所有图片,提高工作效率。 ...
自动生成CSS样式是现代前端开发中的一种实用技术,主要通过自动化工具或软件来快速创建和管理复杂的样式规则。这种方式可以帮助开发者节省大量时间,避免手动编写冗长且复杂的CSS代码,特别是在处理大型项目或需要...
综上所述,"CSS样式图片下载助手CSS图片下载器-织梦之家仿站必备"是一个专为仿站设计者提供的工具,它能够有效地帮助用户获取和管理网页中的CSS样式图片。在仿站过程中,首先需要理解CSS样式的应用,这关乎到网站的...
CSS允许嵌套、层叠和继承,使得样式管理更为灵活。 接着,CSS布局是其核心技术之一。传统的布局方式有流体布局(基于百分比宽度)、固定布局(基于像素)以及混合布局。随着响应式设计的需求增加,Flexbox(弹性盒...
本资料主要介绍了引入CSS样式表的四种常见方式,帮助初学者理解并掌握如何有效地应用CSS来美化网页。 1. 内联样式: 内联样式是最基础的CSS应用方式,它通过在HTML元素的`style`属性中直接写入CSS代码。例如: ```...
- 外部样式表:存储在单独的`.css`文件中,通过`<link>`标签引入,如`<link rel="stylesheet" href="styles.css">`,可实现样式复用和高效管理。 4. CSS优先级: - 优先级由选择器的特异性决定,内联样式具有最高...
总之,通过熟练掌握CSS样式文件的使用,我们可以创造出美观、功能丰富的网页,并有效地管理页面元素的样式。无论是超链接的细致调整还是表格的布局优化,都是提升用户体验的重要手段。在实际工作中,不断探索和学习...
本篇将详细介绍如何使用`div`和CSS样式表来实现这样的功能。 首先,我们需要创建基础的HTML结构。`div`元素在HTML中是一个块级元素,通常用于组合其他元素或作为一个独立的容器。在导航条中,我们可以为每个语言...
### CSS样式命名的重要性 在前端开发领域,尤其是涉及到团队协作的大规模项目中,CSS样式命名规范显得尤为重要。良好的命名习惯不仅能够提升代码的可读性和可维护性,还能有效减少团队成员之间的沟通成本,提高整体...
通过掌握不同选择器的权值以及它们如何相互作用,可以帮助开发者更有效地解决样式冲突,并创建更加健壮和易于维护的样式规则。此外,还需要注意行内元素的特定样式限制,这有助于避免一些常见的布局问题。
2. **创建CSS样式**:然后,为每个小图像在CSS中定义一个新的类或ID。每个样式都将包含`background-image`属性,指向合并后的Sprite图,并设置`background-position`属性来定位要显示的图像部分。 例如: ```css ....
此外,CSS模块化方法,如CSS Modules和CSS-in-JS,也日益流行,它们帮助我们管理大型项目的样式,避免命名冲突。 最后,了解CSS性能优化技巧也很重要。这包括减少选择器的复杂性、避免使用通配符选择器(*)、合理...
通过正确地链接CSS样式表,我们可以实现网页设计的统一性和可维护性。以下是四种常用的CSS样式表链接方法: 1. **链入外部样式表**: - 链接外部样式表是最常见的方式,它将样式表保存为单独的`.css`文件,然后在...
Vaadin的UI组件CSS样式规则允许开发者通过定义一系列的CSS类来控制UI组件的外观和行为。本知识点将详细介绍Vaadin组件的CSS规则,包括如何为组件添加激活、禁用、只读状态的样式,以及如何控制组件的尺寸和设置输入...