草庐IT

html - 为大型网站组织CSS

coder 2023-08-11 原文

我有一个关于 CSS 和网站的更一般的设计问题。我知道尽可能规范化代码并避免重复是很好的计算机科学。所以对我来说,至少在理论上,人们在为网站组织样式表时会做同样的事情。

因此,当我开始创建我最近的网站时,我是从同样的理念开始的。它在我的前几页上工作正常,而我只在 firefox 中测试......

然而,随着我网站的发展和添加页面、多种布局(和浏览器),我发现这种理念很快就崩溃了。最终,随着时间的推移,我转向了以下方法:

  1. 我的站点中的每个母版页布局都有一个非常有限的顶级 css 文件,它包含该布局中众所周知的样式的类以及母版页的 css。

  2. 我为每个页面保留特定的 css 样式。

  3. 我为可嵌入的页面元素/控件保留特定的 css 样式

我最终选择了这条路线,这样我就可以相信一个页面上的更改不会意外破坏站点中的其他页面,从而导致大量回归错误。

其他人在处理这个问题时会做什么?这是一个好的/坏的方法...我确实看到了这种方法的缺点,一些页面非常相似,所以做出重大改变意味着改变更多的 css 代码,我也觉得专业人士每天都超过了这个。

其他开发人员如何看待这一理念?好的?坏的?真的很好奇...

对我来说,这是一种情况,我权衡了我的理想(我尽量保持非常紧凑的代码)与更改一页上的需求而破坏其他 20 页的挫败感,因为我将 div 宽度更改了几个像素(例如打乱另一个页面上的 float )。

感谢您的参与

最佳答案

就像任何其他类型的代码一样,如果您在各处复制 CSS 代码,那么您就是在自找麻烦。随着时间的推移,维护对您来说会越来越难。

如果一个页面上的更改不会对其他页面产生不利影响,最好的方法是拥有一个风格指南来驱动您的 UI 布局和设计。如果您的样式指南定义了用于给定设计元素的 HTML 和 CSS 类,那么它们将始终在所有页面上以相同的方式显示。如果需要更改特定页面的元素,您可以更改 HTML 以使用不同的类,然后为该类构建新的 CSS(并将其添加到您的样式指南以供重用)。样式指南还允许您确保您的 HTML 在网站上工作的所有开发人员都是统一的,这意味着在您进行更多开发时,CSS 更改导致问题的可能性更小。

关于 CSS,您需要记住的另一点是,您在页面上创建和引用的每一个 .css 文件都是一个 HTTP 请求。如果每个页面和控件都有自己的 CSS 文件,那么通过拖延每个页面请求的总请求下载时间,您确实会损害用户在网站上的体验。这也使得他们的浏览器不太可能缓存 .css 文件,因为缓存的空间有限,所以如果你继续用越来越多的 .css 文件填充它,它们将更快地从缓存中转储.是的,您可以在处理程序中以编程方式组合 .css 文件,这样您的页面每页只发出一个请求,但是您会有额外的服务器开销并且缓存问题仍然存在(除非您对站点上的所有 .css 文件有一个请求,这违背了你在这里尝试做的事情的目的)。

关于html - 为大型网站组织CSS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4432198/

有关html - 为大型网站组织CSS的更多相关文章

  1. ruby - 使用 ruby​​ 将 HTML 转换为纯文本并维护结构/格式 - 2

    我想将html转换为纯文本。不过,我不想只删除标签,我想智能地保留尽可能多的格式。为插入换行符标签,检测段落并格式化它们等。输入非常简单,通常是格式良好的html(不是整个文档,只是一堆内容,通常没有anchor或图像)。我可以将几个正则表达式放在一起,让我达到80%,但我认为可能有一些现有的解决方案更智能。 最佳答案 首先,不要尝试为此使用正则表达式。很有可能你会想出一个脆弱/脆弱的解决方案,它会随着HTML的变化而崩溃,或者很难管理和维护。您可以使用Nokogiri快速解析HTML并提取文本:require'nokogiri'h

  2. ruby - capybara field.has_css?匹配器 - 2

    我在MiniTest::Spec和Capybara中使用以下规范:find_field('Email').must_have_css('[autofocus]')检查名为“电子邮件”的字段是否具有autofocus属性。doc说如下:has_css?(path,options={})ChecksifagivenCSSselectorisonthepageorcurrentnode.据我了解,字段“Email”是一个节点,因此调用must_have_css绝对有效!我做错了什么? 最佳答案 通过JonasNicklas得到了答案:No

  3. ruby-on-rails - Rails HTML 请求渲染 JSON - 2

    在我的Controller中,我通过以下方式在我的index方法中支持HTML和JSON:respond_todo|format|format.htmlformat.json{renderjson:@user}end在浏览器中拉起它时,它会自然地以HTML呈现。但是,当我对/user资源进行内容类型为application/json的curl调用时(因为它是索引方法),我仍然将HTML作为响应。如何获取JSON作为响应?我还需要说明什么? 最佳答案 您应该将.json附加到请求的url,提供的格式在routes.rb的路径中定义。这

  4. ruby-on-rails - 使用 Sublime Text 3 突出显示 HTML 背景语法中的 ERB? - 2

    所以我在关注Railscast,我注意到在html.erb文件中,ruby代码有一个微弱的背景高亮效果,以区别于其他代码HTML文档。我知道Ryan使用TextMate。我正在使用SublimeText3。我怎样才能达到同样的效果?谢谢! 最佳答案 为SublimeText安装ERB包。假设您安装了SublimeText包管理器*,只需点击cmd+shift+P即可获得命令菜单,然后键入installpackage并选择PackageControl:InstallPackage获取包管理器菜单。在该菜单中,键入ERB并在看到包时选择

  5. ruby - Ping ruby 网站? - 2

    在Ruby中可以使用哪些替代方法来ping一个ip地址?标准库“ping”库的功能似乎非常有限。我对在这里滚动我自己的代码不感兴趣。有没有好的gem?我应该接受它并忍受它吗?(我在Linux上使用Ruby1.8.6编写代码) 最佳答案 net-ping值得一看。它允许TCPping(如标准ruby​​ping),但也允许UDP、HTTP和ICMPping。ICMPping需要root权限,但其他则不需要。 关于ruby-Pingruby网站?,我们在StackOverflow上找到一个类

  6. ruby-on-rails - Ruby url 到 html 链接转换 - 2

    我正在使用Rails构建一个简单的聊天应用程序。当用户输入url时,我希望将其输出为html链接(即“url”)。我想知道在Ruby中是否有任何库或众所周知的方法可以做到这一点。如果没有,我有一些不错的正则表达式示例代码可以使用... 最佳答案 查看auto_linkRails提供的辅助方法。这会将所有URL和电子邮件地址变成可点击的链接(htmlanchor标记)。这是文档中的代码示例。auto_link("Gotohttp://www.rubyonrails.organdsayhellotodavid@loudthinking.

  7. ruby-on-rails - capybara ::ElementNotFound:无法找到 xpath "/html" - 2

    我正在学习http://ruby.railstutorial.org/chapters/static-pages上的RubyonRails教程并遇到以下错误StaticPagesHomepageshouldhavethecontent'SampleApp'Failure/Error:page.shouldhave_content('SampleApp')Capybara::ElementNotFound:Unabletofindxpath"/html"#(eval):2:in`text'#./spec/requests/static_pages_spec.rb:7:in`(root)'

  8. css - 用 watir 检查标签类? - 2

    我有一个div,它根据表单是否正确提交而改变。我想知道是否可以检查类的特定元素?开始元素看起来像这样。如果输入不正确,添加错误类。 最佳答案 试试这个:browser.div(:id=>"myerrortest").class_name更多信息:http://watir.github.com/watir-webdriver/doc/Watir/HTMLElement.html#class_name-instance_method另一种选择是只查看具有您期望的类的div是否存在browser.div((:id=>"myerrortes

  9. ruby - 如何使用 Ruby 将 CSV 文件读入 HTML 表格? - 2

    我正在尝试将一个简单的CSV文件读入HTML表格以在浏览器中显示,但我遇到了麻烦。这就是我正在尝试的:Controller:defshow@csv=CSV.open("file.csv",:headers=>true)end查看:输出:NameStartDateEndDateQuantityPostalCode基本上我只获取标题,而不会读取和呈现CSV正文。 最佳答案 这最终成为最终解决方案:Controller:defshow#OpenaCSVfile,andthenreaditintoaCSV::Tableobjectforda

  10. ruby - 如何使用 Nokogiri 解析纯 HTML 表格? - 2

    我想用Nokogiri解析HTML页面。页面的一部分有一个表,它没有使用任何特定的ID。是否可以提取如下内容:Today,3,455,34Today,1,1300,3664Today,10,100000,3444,Yesterday,3454,5656,3Yesterday,3545,1000,10Yesterday,3411,36223,15来自这个HTML:TodayYesterdayQntySizeLengthLengthSizeQnty345534345456563113003664354510001010100000344434113622315

随机推荐