网站设计中合理(lǐ)架构CSS是怎样的

这篇文(wén)章将為(wèi)大家详细讲解有(yǒu)关网站设计中合理(lǐ)架构CSS是怎样的，文(wén)章内容质量较高，因此小(xiǎo)编分(fēn)享给大家做个参考，希望大家阅读完这篇文(wén)章后对相关知识有(yǒu)一定的了解。

為(wèi)乌拉特后等地區(qū)用(yòng)户提供了全套网页设计制作服務(wù)，及乌拉特后网站建设行业解决方案。主营业務(wù)為(wèi)成都网站建设、网站设计、乌拉特后网站设计，以传统方式定制建设网站，并提供域名空间备案等一条龙服務(wù)，秉承以专业、用(yòng)心的态度為(wèi)用(yòng)户提供真诚的服務(wù)。我们深信只要达到每一位用(yòng)户的要求，就会得到认可(kě)，从而选择与我们長(cháng)期合作。这样，我们也可(kě)以走得更遠(yuǎn)！

一、架构CSS

在当前浏览器普遍支持的前提下，css被我们赋予了前所未有(yǒu)的使命。然而依赖css越多(duō)，样式表文(wén)件就会变得越大越复杂。与此同时，文(wén)件维护和组织的考验也随之而来。
(曾几何时)只要一个css文(wén)件就够了——所有(yǒu)规则(rule)汇聚一堂，增删改都很(hěn)方便——可(kě)这种日子早已遠(yuǎn)去。(现在)建立新(xīn)网站时，必须花(huā)点时间好好筹划怎么组织和架构css。

二、文(wén)件的组织

构建css系统的第一步是大纲的拟定。(我认為(wèi))css组织规划的重要性堪比网站目录结构。(注:用(yòng)词夸张一点，让你加深记忆) 没有(yǒu)哪种方案放之四海而皆准，因此我们会讨论一些基本的组织方案，以及它们各自的利弊。

三、主CSS文(wén)件

通常可(kě)以使用(yòng)一个主css文(wén)件，来放置所有(yǒu)页面共享的规则。这个文(wén)件会包含默认的字體(tǐ)、链接、页眉和其他(tā)等样式。有(yǒu)了主css文(wén)件之后，我们开始探讨高级组织策略。

方法一:基于原型

最基本的策略是基于原型页面(archetype page)分(fēn)离css文(wén)件。假如一个网站的首页、子页面和组合页设计不同，就可(kě)以采用(yòng)基于原型的策略。(这种策略下)每个页面都会有(yǒu)专属的css文(wén)件。

在原型数量不多(duō)的情况下，这个方法简单明了、行之有(yǒu)效。然而，当页面元素并不按部就班的位于各个原型页时，问题就出现了。如果子页面和组合页共享某些元素，而首页却没有(yǒu)，我们应该怎么做呢(ne)?

把共享元素放入主css文(wén)件。这虽不是最纯正的解决办法，却适用(yòng)于某些具體(tǐ)情况。可(kě)是如果网站庞大，(这样做的话)主css文(wén)件会迅速膨胀——这就违背了分(fēn)离文(wén)件的初衷:避免导入不必要的大文(wén)件。

在组合页和子页面的css文(wén)件里各放一份样式代码。(这么做)就意味着要维护冗余代码，很(hěn)显然我们不想这样。

创建一个新(xīn)的文(wén)件，由这两种页面共享。这听起来不错。不过假如只有(yǒu)10行代码，我们创建这个文(wén)件仅仅是為(wèi)了共享这10行代码?(注:杀鸡用(yòng)牛刀(dāo)?) 这方法很(hěn)纯粹，但如果网站庞大有(yǒu)很(hěn)多(duō)对页面共享很(hěn)少量元素时(注:比如30对页面分(fēn)别共享10行代码)，就显得很(hěn)笨重了。

创建一个单独的css文(wén)件，包含所有(yǒu)共享元素的样式。这方法可(kě)能(néng)比较简单，却要取决于网站的大小(xiǎo)和共享元素的多(duō)少。有(yǒu)种情况会很(hěn)烦:导入了一个很(hěn)大的css文(wén)件，但页面只用(yòng)到一小(xiǎo)部分(fēn)样式——还是那句话，这违背了分(fēn)离文(wén)件的初衷。

这就是我所说的重叠的两难(overlap dilemma)。零碎css规则的重叠不一而足，并没有(yǒu)一个完全清晰无误的方案来组织它们。

方法二:基于页面元素/块

如果网站使用(yòng)服務(wù)器端include，这个方法会很(hěn)不错。举例说明，如果使用(yòng)页眉include，它会有(yǒu)自己相应的css文(wén)件。页脚或者其他(tā)部分(fēn)的include可(kě)以如法炮制，只须导入自己的css文(wén)件。这个方法简单干净，不过可(kě)能(néng)会产生很(hěn)多(duō)小(xiǎo)css文(wén)件。

举例来说，假如页脚的样式只需要20行css代码，单独创建一个文(wén)件就划不来了。而且这个方法会导致每个页面都包含一堆css文(wén)件——因為(wèi)有(yǒu)多(duō)少include，就得有(yǒu)多(duō)少css文(wén)件。

方法三:基于标记

这个方案直观实际，与前一个类似。如果网站共有(yǒu)30个页面，其中10个含有(yǒu)form，那么可(kě)以创建一个css文(wén)件专门处理(lǐ)form的样式，只在这10个页面导入它。如果另外10个页面含有(yǒu)table，就创建一个文(wén)件专门处理(lǐ)table样式……诸如此类。

关于网站设计中合理(lǐ)架构CSS是怎样的就分(fēn)享到这里了，希望以上内容可(kě)以对大家有(yǒu)一定的帮助，可(kě)以學(xué)到更多(duō)知识。如果觉得文(wén)章不错，可(kě)以把它分(fēn)享出去让更多(duō)的人看到。

当前标题：网站设计中合理(lǐ)架构CSS是怎样的
文(wén)章链接：

成都网站建设公司_创新(xīn)互联，為(wèi)您提供服務(wù)器托管、建站公司、网页设计公司、做网站、微信公众号、ChatGPT

广告

声明：本网站发布的内容（图片、视频和文(wén)字）以用(yòng)户投稿、用(yòng)户转载内容為(wèi)主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文(wén)章观点不代表本网站立场，如需处理(lǐ)请联系客服。電(diàn)话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新(xīn)互联