1. 首页
  2. 问答
  3. 造型大型网站的常见模式

造型大型网站的常见模式

2010-12-07 45 views
6

如何为大型网站设置，创建和存储您的CSS有什么常见模式？造型大型网站的常见模式

我尝试了很多不同的东西，我自己想出了。

我试图把所有的布局（位置，大小等）在一个文件中，而在另一个所有装饰（颜色，背景等），所以我可以很容易地换出风格，而不影响布局。当每个元素都以多个文件格式化时，这会变得非常单调乏味。

我试图想出一个主CSS文件，然后有不同的规则，都有自己的CSS文件这些规则的任何页面。这最终会导致其他页面具有相同的“独特”规则，并且总是以重复的CSS结尾（每个页面都有自己的CSS文件，定义应该是共享样式），这使得难以维护。

每个CSS书，教程，或任何我读过解释了什么是CSS功能以及如何使用它在一个单一的网页或小网站的内容。我对此有一个很好的理解，但我从来没有看到有关如何制定一个计划，以大量不固定的大型网站的任何讨论。

我可以遵循的模式/惯例吗？

来源

2010-12-07 JD Isaacks

回答

0

我通常做的是这样的：

我为容器制作一个CSS文件，例如：和另一个文件的个人风格（div，img，链接等）。

与集装箱我的意思是，您的网站的大纲，您的网站内容，例如文字去了它。

与我的意思，或样式和列表继续。

我希望这有助于你，生病编辑自己的帖子上这是一个非常好的手册。（当我找到它）。

PS。这本书是免费的。

来源

2010-12-07 16:33:23 Wesley

1

看看大的网站，例如Flickr，Facebook，Twitter或类似的东西。最好的事情（就速度而言）是使用一个css文件来存储所有内容。
在不同的地点不同的规则方面，也有可能设计出“模块化” - 像

.redFontColor { 
    color: #F00; 
} 

.smallFont { 
    font-family: "Courier New", "Times New Roman", serif; 
    font-size: .7em; 
} 

.alignedLeft { 
    text-align: left; 
}

而且使用它在HTML这样的

<div class="alignedLeft"> 
    This will be <span class="smallFont redFont">small and red</span> - but this text will just be <span class="redFont">red</span> 
</div>

有相当多的像这样的网站;-)。

来源

2010-12-07 16:37:07 thedom

2

你应该时刻记住性能。拥有一个大文件是最佳选择，因为它只加载一次，随后可以进行缓存，从而允许加载其他外部资源，从而大幅减少页面加载时间的开销。很明显，它使得一个大文件，但通过评论和缩进，你应该能够以合理的方式将事物分组在一起。

或者你可以让他们分开在你的开发环境，并考虑建立机制，在部署之前他们都合并到一个文件中。这真的是两全其美。

唯一真正需要我已经看到了独立的CSS文件是主题化，可访问性和不同风格的介质（打印，网页等）。

来源

2010-12-07 16:37:55 methodin

0

我们最近我为我们命名为“CSS编译”的东西，这是什么方法回答了什么。我们的编译（由PHP后端完成）为每个模块生成单个编译后的css文件，因此在运行时加载单个CSS文件。这使我们可以自由地定义尽可能多的CSS文件，而不必担心性能。为此，我们在我们的项目的配置文件（模块，例如登录，首页等等以及为每个模块加载的CSS文件）中定义了包含模块-css文件关系的数组。最后描述更多细节，因为这是风格架构的核心。

这是我们使用的基本CSS计划： -

  1. 详细研究都注意到风格模式/可重用的组件，只见模块
    • 标题部分，页脚部分和左菜单在每个模块中都需要
    • 有很多模块在中心有一些列表的表格显示部分（留下公共页眉，页脚和左侧菜单），并且有很多模块显示一些项目详细信息，如用户详细信息页面，类详细信息页面。

  2. 我们有一个设计师团队向我们提供的所有样式。然后我们按照上一步所研究的样式模式将单个CSS文件分割成多个片段。因此，我们创造了一些文件，如 -

  3. common.css 含页眉，页脚，左边的菜单风格

  4. listings.css 包含了所有的样式定义为只出现在列表中的页面组件。

  5. details.css 就像上面提到的一样，如果你有一个.detailsRedHeading类，只有在细节页面的情况下才需要这个类，请在这里定义它。

  6. 任何额外的样式 - 假设许多模块需要弹出式样，然后将这些样式置于popups.css之内，而不是在common.css或任何其他文件中定义这些样式。记住我们必须根据自己的意愿定义尽可能多的css文件。

为了便于以后的主题改变
我从未申请的“我试图把所有的布局（位置，大小等）在一个文件中，而所有的装饰（颜色，背景你的想法等）在另一个“，但如果它可以帮助你，你可以添加到这个架构。将common.css分解为common_layout.css,common_design.css和其他类似的。

此外，请确保您在第一次使用最大可能的样式重用。避免样式声明是这样的： -

.listingsBody 
{ 
    font-family:Trebuchet MS,Liberation Sans,DejaVu Sans,sans-serif; 
    font-size: 12px; 
    .. 
    some listing page styles 
    .. 
} 

.detailsBody 
{ 
    font-family:Trebuchet MS,Liberation Sans,DejaVu Sans,sans-serif; 
    font-size: 12px; 
    .. 
    some details page styles 
    .. 
}

而是有这样的： -

.siteMediumFont 
{ 
    font-family:Trebuchet MS,Liberation Sans,DejaVu Sans,sans-serif; 
    font-size: 12px; 
} 

.detailsBody 
{ 
    .. 
    some details page styles 
    .. 
} 

.listingsBody 
{ 
    .. 
    some listing page styles 
    .. 
}

我已经看到，许多设计师做到这一点。在更复杂的情况下，这种习惯会让事情变得很困难。在编译

详情： -

我们完成应用CSS更改后，我们运行的汇编代码执行以下操作： -

$moduleCssrelation = array("class_details"=> array("details","popups"));

阵列$moduleCssrelation导线，并创建一个编译的文件每个模块的css文件名称的内容。 例如如果class_details模块需要文件details.css,popups.css，则它会创建一个文件common-details-popups.css，该文件也将被加载用于class_details以及任何其他需要这两个css文件的模块。

来源

2010-12-13 16:53:53

相关问题

 相关问题