html/css 框架，我绝对不能错过啥？ [关闭]

Posted 2023-02-22

技术标签:

【中文标题】html/css 框架，我绝对不能错过啥？ [关闭]【英文标题】：html/css framework, what should I definitely not miss? [closed]html/css 框架，我绝对不能错过什么？ [关闭] 【发布时间】：2011-04-15 14:51:26 【问题描述】：

我正在开发一个小 html/css 框架，我可以将它用于我的大多数网站，至少有一个基础可以构建。这是我迄今为止一直在使用的：

CSS 框架

Reset.css - 我使用的是 Eric Meyer 的，www.meyerweb.com。 Typography.css - 网站的所有主要字体样式（来自 blueprintcss.org） Forms.css - 基本的表单样式（来自 blueprintcss.org） Wireframe.css - 这里我为一、二、三列加上页眉和页脚设置了线框。我使用了Holy Grail 技术并实现了它，以便通过为容器 div 设置“onecolumn”、“twocolumns”或“threecolumns”类，我可以在这三者之间切换。

基本技巧

我有一些预制示例供我在任何网站中重复使用：

Suckerfish 下拉菜单 - 各种版本的水平和垂直 Sliding Doors 选项卡 - 虽然我尝试尽可能使用 CSS3

脚本

jQuery - 我尽量少用它（也就是说，如果手头有 css 解决方案，比如 Suckerfish 下拉菜单与 jQ 菜单）

插件

还没有。我昨天查看了css3pie，看起来很有希望。

尚待调查

到目前为止我还没有使用过但可能很有趣的是 css 和 js 缩小器。另外，目前我用@import在main.css中包含了上面提到的5个css文件，也许我应该在上传之前让它们自动合并？

当然还有 CSS 网格系统。我从来没有掌握这些窍门，但也许我应该再试一次。我知道 960 网格非常流行，但我不确定我是否想将类纯粹用于标记（grid_4、column_5 等）。对我来说，这有点像 <span class="red"> 将文本变为红色，就像不如使用内联样式。

不管怎样，这只是一个基本的设置，在尚未纳入此框架的网站中存在很多问题。那么，我应该真正检查什么来改进我的框架？（欢迎使用 HTML5 和 CSS3，请不要使用 flash :P）

建议

我将在此处列出以下建议，我会检查一下。

HTML5 Boilerplate IE 7/8/9.js Modernizr

【问题讨论】：

准确地说是Suckerfish之子... 哦，这是我google的时候第一次点击，估计我没注意。您错过了 HTML5 样板：html5boilerplate.com。此外，出色的 ie7/8/9.js 向后兼容。还有 Modernizr，也用于兼容性检查。 blueprintcss.com 即将推出？不要在框架上浪费时间。 【参考方案1】：

放下吸盘鱼。

随着纯触摸设备（手机、平板电脑）的数量不断增加，使用基于悬停的 UI 元素只会惹恼用户。

【讨论】：

不一定。您始终可以将样板 javascript 添加到将检测浏览器并相应地呈现标记的框架中。 quirksmode.org/js/detect.html 我认为 tuomasR 是有道理的。我最近听到更多人这样说。【参考方案2】：

我强烈推荐HTML5 Boilerplate

HTML5 Boilerplate 是专业的 badass 的基本 HTML/CSS/JS 模板一个快速、强大且面向未来的网站。

经过两年多的迭代发展，你得到最好的最佳实践：跨浏览器标准化，性能优化，甚至可选功能比如跨域ajax和flash。一种启动 apache .htaccess 配置文件用缓存把你的效果挂钩规则和准备您的网站服务 HTML5 视频，使用@font-face，获取你的 gzip 拉链打开。

样板不是框架，也不是它是否规定了任何哲学开发，它只是有一些技巧让您的项目起步快速和右脚。

【讨论】：

我真的开始研究这个了，谢谢。 +1 - 绝对是最简单的方法。虽然听到更多想法会很有趣，但我觉得这个问题有点死。我昨天开始了一个新项目并使用了样板。我根本不需要添加任何东西。这比我自己编写的任何框架都要好。我会接受它作为答案:)【参考方案3】：

既然已经有这么多，为什么还要再创建一个。如果您觉得有问题或缺失，我宁愿建议您为您所指的框架做出贡献。这样，您还将帮助已经在使用它的每个人。

【讨论】：

因为这样我实际上从中学到了一些东西。我可以盲目地使用 html5boilerplate 模板，但这并不好玩。【参考方案4】：

从性能的角度来看，我会使用 Compass 和 SASS 和内置的 BlueprintCSS 框架，它主要处理所有重置需要渲染相同的跨浏览器，你可以使用 mixins 而不是网格的内联类。最重要的是，您最终会得到一个加载速度非常快的小 css 文件。我还使用modernizr、html5boilerplate、css浏览器选择器，仅用于服务器端php，渲染速度更快。如果您在 SASS 和 LESS 之间犹豫不决，那么与 Compass+SASS 的蓝图集成非常壮观。希望这会有所帮助！

【讨论】：

嗯，我不确定使用 SASS 是否会影响我的 css 技能。我可以看到它的优点，但也有一些缺点。有人有这方面的经验吗？【参考方案5】：

还有CSS browser selector jQuery 插件。这在你的 CSS 中使用了一些简单的选择器来告诉哪个浏览器要做什么：

.ie .myClass

   background-color: #f00;


.ff .myClass

   background-color: #00f;

我在我的网站上使用它，它是一个比 CSS hack 或条件注释更好的解决方案。

【讨论】：

条件 cmets 在有或没有 JS 的情况下都可以工作，我想知道你的解决方案如何比它们“好得多”。因为条件 cmets 只能用于区分 IE 和其他浏览器，因为它们是 IE 唯一的东西。这个 JS 允许你定位你想要的任何浏览器（除了一些不起眼的浏览器），而不需要任何肮脏的黑客或 IE 代码:)【参考方案6】：

在我看来，Blueprint CSS 网格技术优于 960gs。我不喜欢 960 的一点是，列之间的排水沟是由每列左右的两个“半排水沟”形成的。这很奇怪；您最终会在布局的左侧和右侧出现半排水沟。

【讨论】：

【参考方案7】：

如果您正在研究缩小器，您可能愿意在测试和部署之前通过某种构建脚本运行您的代码。如果是这种情况，我建议为您的 css 研究 LESS：http://lesscss.org/docs

LESS 是纯粹的令人敬畏。

我不知道您的项目需要多少客户端脚本，但如果它有任何广泛的内容，您可能想考虑使用 M4 或 C++ 预处理器来添加对包含、ifdefs 等的支持...这个可以帮助保持您的代码井井有条，并允许您维护未出现在生产构建中的调试代码。 This post 有点把这个想法发挥到了极致，但它可能会给你一些想法。

出于好奇，您使用的是什么服务器端语言？

【讨论】：

谢谢，特别是 LESS 对我来说会很有趣。我使用 php，通常我使用 wordpress 来制作基本网站，但这真的取决于项目。 WordPress 是基于 PHP 构建的引擎。【参考方案8】：

我不敢相信我忘记了（也没有人提到）fontsquirrel。我现在已经用它嵌入了一些字体，它真的很有魅力。

【讨论】：

【参考方案9】：