平时我都怎么组织CSS

html-css019

平时我都怎么组织CSS,第1张

多个CSS文件可以利用@import导入的页面中,好处是减少HTTP请求数,坏处是导入样式要比链接样式的速度慢,而且导入的文件有顺序的规定,顺序不当常常会出现样式没办法应用等错误,也是让人无比纠结。而对于全部写在单个文件的,其内部最好有合理的设计结构和注释:(1)一般性样式:主体样式reset样式链接标题(2)辅助样式表单通用和错误一致的条目(3)页面结构标题、页脚和导航布局其他页面结构元素(4)页面组件各个页面(5)覆盖然后使用大注释块来分割每个部分/* @group general styles---------------------------------------------------------------*/自我提示:适当的注释可以为后期的开发有很大的帮助,例如:/*字体颜色定义说明@colordef #F00红色*/也可以使用@tudo来表示某些东西需要后期修改、修复或复查,用@bugfix表示代码或特定浏览器遇到的问题,用@workaround表示并不完善的权宜之技(这些都跟JS的的相似,统称为gotcha)/*@tudo 网站上线之前记得删除此规则*//*@bugfix 解决IE6的双边距问题*//*@workaround 我试图去解决这个在IE6下的XXX问题,但它似乎表现的还不够好*/3、另外网上也流行一种模块化css的文件分类方法:reset.css // 对阅读 器的默认样式执行 重设layout.css // 管理页面的布局typeset.css // 图文的编排与color.css // 统一管理颜色的搭配print.css // 打印效果样式ie.css // 把对ie的hack单独分开或:reset.cssheader.css // 头部的所有样式container.css // 除头部/底部外的中间区域样式footer.css // 底部样式print.cssie.css以上的分类看似合理且仅仅有条,但管理起来很麻烦,也不是每个人都可以百分百了解每个CSS文件里面的内容,所以疑问就来了:(1)效率疑问 与最终目的在站点 内容上面,如果改某一个区域的内容,可能要多个 CSS都改。这样一来,本来基本 的一个修改,开始变得复杂起来。并且,如果多个都改,可能会使我们忽略了某些东西,又须要 进一步调试,这样不仅肯使最终目的实现延后,还是一个效率的疑问 。(2)调用尽可能少的CSS文件大多楼情况下,一个站点 都是分成头部,中部和底部,并且,一般,要做新的频道/页面之类的东西,都不会变动头部和底部,而只是变动中间部分。这样一 来,所有CSS文件都要调用,因为,HTML和CSS的模块化并不一致。这样,就会导致服务器承受更多的压力。这是一个方面。另一个方面是,如果新页面中 某些元素与其他页面有冲突,我们可能要搞一大堆关于优先性选择的代码,添加 代码量。这些都不是我们想要的。这就为什么要把header.css和 footer.css分开来的原由 。(3)多人合作上的疑问如果我们多个人在工作,大家的分工可能是,有人完成头部的导航,有人完成底部的搜索条,有人完成中部新页面的构建。这样一来,大家都同时在改多个 文 件,并且,改的东西不同。如果要更新到服务器,就要先比较 ,再更新。(当然,现在有版本管理这样的软件。但是,同时工作的话,版本也是一个疑问 ,要相信, 或许更新永远都改不上改动 。)4、第四种就是采用CSS框架了,比如我最喜欢的960 GRID和YUI CSS Framework,大体原理一样:一个css reset一个font定义和一个核心的Grids网格布局文件,然后就是各种布局位置计算,然后自己就可以写页面的其他样式了5、使用CSS预处理器(Sass、LESS 和 Stylus)帮助简化CSS内容和组织管理,这个可以常见详细我自己的管理组织管理方法:之前看过的《编写高质量代码 Web前端开发修炼之道》,作者给出了一个非常通用的css组织方式:base+common+page,但其实也有很多人喜欢把base直接写在common里面,反正也是站点的几乎所有页面都调用,我用的最多的是commom(全站调用)+page(独立页面样式,名字自定义也可)两个文件的方式(也是因为后来项目的原因才慢慢喜欢上的),当然前提是全站风格统一, 可以做得很模块化,需求变动不大;common的的样式权限一定要在应用效果的情况下保持尽可能低,以方便后期需求突变时可以强行覆盖;其实组织样式考虑因素还是有的,只是一般我比较通用以上那种:(1)首先当然要看项目的规模和访问量参考之前的方法,可以为按功能或页面区块分成多个css文件,然后根据需要利用@import导入到一个文件中,然后再引入页面中(2)页面实现的复杂度及需求变换程度页面的复杂程度基本上是如何组织CSS我觉得最重要的考虑因素了,风格统一的网站header和footer不会变,我们可以做成一个模块化方便调用、你可以把它写在common.css里面全站都应用,大家常用的reset也应该写在这里面,完全没必要单独写一个reset.css文件,因为所有的全站都会用到;然后最重要的就是分析页面的其他部分是不是有设计相同的部分,有的话抽离出来放到common里面,全站都可以调用,这个就是所谓的CSS组件化了还有一个非常纠结的问题,我想做前端时最理想的是:设计师设计好所有的稿然后交给前端一次性全部转换为Web页面、多好啊!样式等文件一开始就可以参照设计稿进行全方位的规划组织,想怎么弄怎么弄,清晰明了;可现实就是那么骨干、尼玛有时设计稿变化大到你想吐血,还是半路穿插进来的,你会发现什么头部header和尾部footer又得重写个新的了,之前的模块话也都完全用不上了,而有时又只是一个页面而已(比如专题页),很不情愿为其模块化, 纠结啊!

HTML(超文本标记语言)和CSS(级联样式表)是用于构建Web页面的两项核心技术。HTML为各种设备提供页面的结构,为CSS提供(视觉和听觉的)布局。与图形和脚本一起,HTML和CSS是构建网页和 Web应用程序的基础。

HTML称为超文本标签语言,是一种标识性的语言。它包括一系列标签.通过这些标签可以将网络上的文档格式统一,使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本,HTML命令可以说明文字,图形、动画、声音、表格、链接等。

超文本是一种组织信息的方式,它通过超级链接方法将文本中的文字、图表与其他信息媒体相关联。这些相互关联的信息媒体可能在同一文本中,也可能是其他文件,或是地理位置相距遥远的某台计算机上的文件。这种组织信息方式将分布在不同位置的信息资源用随机方式进行连接,为人们查找,检索信息提供方便。

层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。

CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力。

扩展资料:

CSS具有以下特点:

1、丰富的样式定义

CSS提供了丰富的文档样式外观,以及设置文本和背景属性的能力;允许为任何元素创建边框,以及元素边框与其他元素间的距离,以及元素边框与元素内容间的距离;允许随意改变文本的大小写方式、修饰方式以及其他页面效果。

2、易于使用和修改

CSS可以将样式定义在HTML元素的style属性中,也可以将其定义在HTML文档的header部分,也可以将样式声明在一个专门的CSS文件中,以供HTML页面引用。总之,CSS样式表可以将所有的样式声明统一存放,进行统一管理。

另外,可以将相同样式的元素进行归类,使用同一个样式进行定义,也可以将某个样式应用到所有同名的HTML标签中,也可以将一个CSS样式指定到某个页面元素中。如果要修改样式,我们只需要在样式列表中找到相应的样式声明进行修改。

3、多页面应用

CSS样式表可以单独存放在一个CSS文件中,这样我们就可以在多个页面中使用同一个CSS样式表。CSS样式表理论上不属于任何页面文件,在任何页面文件中都可以将其引用。这样就可以实现多个页面风格的统一。

参考资料:百度百科——HTML

百度百科——css