相关疑难解决方法(0)

随着时间的推移,CSS样式表有一个变大和乱的习惯.

有很多规则,提示和思想流派有助于实现更清洁的CSS.(例如这里)然而,所有这些都需要持续的警觉性,活动和维护者的大量纪律,并在现实世界中取得成功.正如Nicole Sullivan所说的那样:

事实上,在大多数情况下,我们认为最佳实践的事情会导致我们试图避免的不良后果.我意识到(尽管它可能不受欢迎),我们不能通过更努力地努力使它运作良好.每次我们开始一个新项目时,我们都会想"这一次,我将保持代码清洁.这一次,该项目将成为CSS可以做些什么的光辉榜样."随着时间的推移,随着更多内容和功能被添加到网站中,代码变得意外重复和不可预测性.

是否有任何努力创建某种语言,严格的结构规则和无情的编译器,强制执行严格的规则,以防止样式表成为意大利面？编译的最终结果将是CSS.

我不知道这样的语言是什么样的,并且考虑到大量的可能性和组合,这是一个可解决的问题.

这个领域有没有研究？有什么要试试的吗？

一个非常有趣的相关工具是CSS Lint,但我要问的是甚至更远.

编辑: LESS和SASS绝对走向正确的方向,但它们不是我想要的.他们介绍了一些非常好的功能,并且对于CSS开发人员来说是天赐之物,但是我所询问的内容甚至更深入到了定义的强制结构中.

有没有尝试和创建一个组织CSS代码的形式化方法？在我开始制定自己的保持可读性的策略之前,我想知道还有什么.谷歌并不是很有帮助,因为我不完全确定要搜索的条款.

我正在考虑缩进/间距,何时使用新行,命名约定等.

有任何想法吗？

有什么方法可以让IE6理解双重类,比如我有一个带有颜色类的MenuButton类,可能还有一个点击类; 喜欢 :

.LeftContent a.MenuButton {..general rules..}  
.LeftContent a.MenuButton.Orange {..sets background-image..}  
.LeftContent a.MenuButton.Clicked {...hum ta dum...}

现在,IE6了解<a class="MenuButton Orange">,但是当添加Clicked时<a class="MenuButton Orange Clicked">,IE就会忽略Clicked规则.

当然,我可以重写我的CSS,并且有.MenuButtonOrange
等自己的规则(而且它可能比询问这个问题要花很多时间;-),
但是很棒,它只是没有吸引力和Web 0.9 ......

干杯!

可能重复:
如何管理CSS爆炸

我打算用一致的样式和一致的CSS方案构建我的网站.但是当我调整单个页面(特别是主搜索表单)时,样式已经失控.

我已经完成了一次破坏样式和几乎从头开始重建的过程,现在看起来是时候再次这样做了.我怎么能有效率呢？我正在寻找一种方法,而不是软件实用程序(虽然我愿意接受那些建议......除非他们花钱......).

补充说明: 我使用的是CSS框架,很难保持padding和margin协调.

补充说明2: 此帖子的初始回复是关于CSS的最佳做法.我们假设我已经尝试过遵循最佳实践(事实上,我做过).现在这是我正在寻找的清理程序.

添加了注释3: 截至6月14日,将此回复(我刚发现)与下面的帖子相结合可能是一个全面的答案.

关闭说明:

我知道我的问题太笼统了,因此我希望我没有发布它.(也许这就是为什么它得到了一次投票......我将永远不知道没有评论来解释原因.)另一方面,我得到了我需要的东西,所以我很高兴我发布了它.

我很惊讶我没有对我的答案进行投票 - 即使有其他人无价的投入,我认为它很好.

从我的观点来看,我的接受主要取​​决于答案的可用性 - 这一观点令人遗憾地无法消化一些更令人兴奋和全面的答案.

作为完全重复关闭

我只是尝试再次发布这个(主题,正文,标签),看看是否会建议帖子"如何管理CSS爆炸".有趣的是,它没有.我在refactoring该帖子中添加了标签.

我目前正在建立我的第一个网站.我不知道从哪里开始在CSS页面上,或者我是否应该遵循任何标准.

我很感激任何链接或第一手的建议.

Java问:我喜欢CSS用于简单的网页,但是当涉及现实世界的网站时,它会厌恶它,因为你得到了css爆炸和大量的重复.

我很想使用Sass和Compass,但它们是Ruby程序,很可能需要一些有趣的Maven + JRuby才能为Java Web app dev工作.如果您使用Eclipse或支持与正在运行的Web应用程序同步的任何IDE,这也会很困难.

对于地狱中的CSS,还有一个更好的替代方案是Java吗？

可能重复:
如何管理CSS爆炸

我找到的最困难的事情之一是保持我的样式表有条理.我通常从编写一个小的重置部分开始.然后我编写布局块,并在编写HTML块时继续逐步添加样式.

但是,在前两步之后,一切都变得一团糟.基于我的异想天开的HTML编码,样式会被添加,删除,遗忘,这经常被更改.我找不到一种合理的方法来分离和分类我的CSS.

我发现自己为默认样式,导航和布局创建了单独的工作表.

在我编写了页脚的CSS后,我无法弄清楚它是否应该进入默认样式表,导航样式或布局文件.它的容器当然是布局的一部分,它的导航菜单是部分导航,但它的样式应该进入基本样式表.我发现自己正在考虑相应地分离CSS,但这不可能是正确的.

我找不到合理的方法将我的想法组织成有序的分类.

有人可以给我任何见解吗？

我刚刚开始这项新工作,作为设计师我必须为我们的网络应用程序维护CSS文件.现在,它跨越了近7000条线路,重量超过160kb,并且有数百条重要规则.

我想重新组织文件,将其拆分为子部分,清理它,并使其语法同质化.

但它似乎是一项巨大的任务,文件和应用程序是如此庞大和复杂,我想知道它是否甚至可行,而不会破坏某些东西(而不是看到它).

我已经使用在线工具审核了该文件,似乎我可以使用某种自动重构而不会有太多风险.我还尝试了一些工具来检查选择器是否实际使用,问题是这个Web应用程序是完全用javascript编写的,所以整个过程是动态的,常规工具几乎无法使用(没有适当的链接可以关注,没有站点地图等等.)

你们有什么建议如何继续,从哪里开始,如果它甚至值得我的时间？

我正在尝试创建一个带有页眉和页脚的布局(两者都有固定的高度)和一个填充剩余空间的内容div.在content-div中,我希望div具有基于百分比值的高度(以content-div的heihgt为父级).我无法弄明白该怎么做？

这是我想要完成的一个例子. 布局示例http://img22.imageshack.us/img22/45/layoutbz.png

如果这不遵循良好的问题指南,我很抱歉,但我希望它在课堂上如何管理CSS爆炸,并收到类似有用的响应.

我熟悉一些基本的视图冗余缓解策略,如下所示:

• 在适当的地方使用帮助者
• 不要重复自己
• 使用部分和布局

如果我在上面的列表中遗漏了一些重要的想法,请随意提出建议.

尽管如此,我仍然认为在我看来有几个维度/自由度,导致很多if-then语句或至少三元块.例如,在我正在搞乱的事情中,我正在为一个程序的标题栏工作,当三个"大"变量调用视图时:

• 用户是否为管理员
• 用户是否已登录
• 正在查看的页面是属于用户还是其他人

它最终看起来像这个烂摊子:

<% content_for :subheader do %>
  <div class="row">
    <% if @user %>
      <% if @user == current_user %>
        <%= link_to 'My programs', user_programs_path(current_user), :class => 'active' %>
      <% else %>
        <%= link_to "#{@user.username}'s programs", user_programs_path(@user), :class => 'active' %>
      <% end %>
      <%= link_to 'Browse all programs', programs_path %>
    <% else %>
      <% if current_user %>
        <%= link_to 'My programs', user_programs_path(current_user) %>
      <% end %>
      <%= link_to 'Browse …

到目前为止,我在网页设计方面的经验一直是规模很小的网站和博客(页面样式没有多少差异).但是,我现在开始处理一些规模更大的网站,我想通过创建可扩展和可维护的css文件/结构来开始.

目前,我将样式应用于网页的方法是在每个网页中为每个网页提供一个不同的ID,然后当我设计一个页面时,我的css规则将如下所示:

body#news section .top { rules }

当然,对于大型网站应用CSS有一种更可维护的方法吗？

我整理了一个以前由不同的人修改过的网站.这是我拥有的页面的骨架..

• 的test.html
• nav.css
• default.css
• content.css

我认为CSS可以做一个适当的整理.我正在考虑使用这样的重置http://meyerweb.com/

取代 :

*{margin: 0; padding: 0;}

并且可能将css分成fonts.css,layout.css

任何想法,建议我如何解决这个问题将不胜感激.

我正在设计一个MVC网站,我已经有很多东西Site.css只适用于一个控制器甚至一个页面.我想将其分解为多个css文件并仅在必要时包含它们,但是当所有头信息都在时,我该怎么做呢Site.Master.

注意:我仍然想要使用母版页,我只想要每页或每个控制器使用一些标题资源.