主页构建 - 如何更有效地使用CSS?

时间:2015-01-22 08:53:23

标签: html css css3

我重新制作了一个旧网站,该网站使用表格来处理所有内容(结构和内容)。现在我以一种(有希望的)更现代化的方式做到了这一点#34;现在所有的地下室都是div,但在我的内容中,我仍然使用表格,因为我总是要把表格作为表格来展示,为什么我不应该用表格标签做这个?

无论如何,现在我要对CSS内容进行排序,并尝试以高效的方式组织它。你怎么做到这一点 ? ...

  • 我有一个main.css,它应该存储所有在不同文件中使用多次的东西
  • 每个页面的一个css文件,以防我必须编辑一些用main.css编写的东西

但如果我在 main.css 中获得了CSS标记input { width: 150px; },在 idontknow.css 中获得了input { width: 100px; }该怎么办?它的工作原理(在idontknow.html上,输入为100而不是150像素,但它是现代网络开发人员的方式吗?

如果有一个维护中心点,这可能意味着将所有内容放在一个CSS文件中?

4 个答案:

答案 0 :(得分:1)

您可以使用SASS / SCSS(http://sass-lang.com/)之类的东西来组织您的样式表文件,并将它们编译为生产站点的单个main.css。

在开发过程中,没有必要快速加载时间,但在生产站点上,单个CSS文件将加快页面的加载过程。

答案 1 :(得分:1)

你可以使用SASS。

但是... 您是否听说过Web组件或Polymer-project? https://www.polymer-project.org

主要思想是在每个组件中使用样式和脚本,这样您就可以在适当的位置放置样式,并且为了Web组件的目的,可以在任何地方重用组件(Polymer中的新html元素)在你的html文件中。

当然,整个页面都可以有一个main.css。

答案 2 :(得分:1)

首先,如果你想从我的角度构建一个modern网站,你绝对应该使用像SASSLESS这样的CSS预处理器。

我建议您使用Foundation Zurb Responsive framework。它首先是移动设备,因为每个modern网站都应该响应。它使用SASSare 3 ways of getting started using it

SASS允许您为每个页面创建和分隔样式,而不会将它们混为一谈。所以基本上你会有_home.scss_header.scss_footer.scss,但是当你编译时 - 你将在一个样式文件中创建所有内容。此外,CSSJS也可以缩小。

答案 3 :(得分:0)

您应该尝试最后只有一个样式表。这是您网站性能的最佳选择,因为它可以保存一个请求。

您可以通过使用类和ID来实现这一点。正如Pete所提到的,你也可以使用类或ID来定位body元素。你也可以给Elements多个类。