css - 通过稍微修改类而不复制类并重命名来重新使用类

标签 css css-selectors less

好吧,我已经读了一段时间了,这里有很多聪明的人,这就是为什么我对问这个 CSS 问题感到有点尴尬和有点害怕,我冒着被 mock 的风险来换取增加我的知识所以在这里去。

我一直在努力思考一个概念,这个概念对于 SO 上的大多数人来说可能是一个小问题,但是阅读 CSS 书籍和大量在线教程仍然没有让我对这个问题变得清晰。

当我创建一个网站作为设计时,显然有很多重复的样式,但这是我最大的问题,即重复使用与我设计的特定页面所需的样式不完全匹配的样式。

例如,我创建了一个“h1”、“h2”、“p”规则,这些规则几乎完全相同,如果我需要更改它,我只需创建一个类或在必须时使用 span 标签为设计的特定部分修改这些标签,不知道这是否是处理它的最佳方式,但这就是我一直在做的事情。

但更糟糕的是,我在主体 div 中为主要内容和次要内容创建了容器,对于我创建的每个页面,我基本上从上一页复制了 div(id 或类)(我已经为) 并更改名称,这样我就可以修改它而不会弄乱我从中复制的其他页面上的相同 div 或类。

这似乎太多了 CSS,但我想不出还有什么方法可以修改类或 ID 来满足我在特定页面上的需求。这就是解释,这里是我过度复杂化的一些实际 CSS:

一个名为:Products & Pricing --

    <div id="primaryContent_pp">
         <h1 id="introHeader">Products & Pricing</h1>
         <p id="introText">...generic text...</p>   
             <img id="serversImg" alt="..."></img>      
    </div><!---end primaryContent_pp--->

一个页面叫做:支持--

    <div id="primaryContent_support">
             <h1 id="introHeader">Support</h1>
             <p id="introText">...generic text..</p> 
             <img id="supportImg" alt="..."></img>     

    </div><!---end primaryContent_support--->   

页面名为:联系方式--

    <div id="primaryContent_contact">
             <h1 id="introHeader">Contact Us</h1>
             <p id="introText">...generic text...</p> 
             <img id="contactImg" alt="..."></img>     

    </div><!---end primaryContent_contact--->    

所以你看到我在这里做什么了吗?

我正在为每个页面的 primaryContent div 创建一个单独的规则,因为我担心如果我必须改变它的大小或填充,我会弄乱其他页面上具有相同 id 或类的所有其他 div 以及我的尝试不这样做我只是复制规则并毫无恐惧地改变它因为我知道它不会影响另一个 div 或规则但这只是愚蠢的因为我写了这么多 CSS 而没有加强我的游戏因为我蒙上了无意义的阴影。

您可能还注意到我没有更改 (h1 id="introHeader") 和 (p id="introText"),因为我相信这里有人可以向我展示如何绕过必须为每个页面创建一个新的“h1”规则或“p”规则,以防我想更改 div 的宽度、高度、填充、边距、 float 等。

任何人都可以帮助我结束我的盲目并为我的疯狂带来逻辑,这样我就可以一劳永逸地学习如何不用担心重复使用 id 和类'知道我的东西有一个更简单的逻辑在做什么?

我确实知道 ID 只能在每个页面和类中使用一次,根据需要多次使用,但我正在做的是太多的 css,必须有一种更简单的方法来编辑它的每页样式必须复制该规则并重命名它,以便我可以编辑填充、边距、文本对齐、 float 、宽度、高度等内容,而不必担心它会破坏其他地方的内容。

这有意义吗?抱歉冗长的解释,感谢您花时间向我倾诉您的知识。

最佳答案

  1. 在语义上标记您的 HTML,例如:
    产品:<body id="products"> ... </body>
    支持:<body id="support"> ... </body>

  2. 根据需要在您的 CSS 中进行一次性修改

    #introHeader                { /* common styles */ }
    body#products #introHeader  { /* page-specific tweaks */ }
    body#support  #introHeader  { /* page-specific tweaks */ }
    

仅在每页的基础上覆盖您绝对必须的内容,让通用样式从单一来源继承。

关于css - 通过稍微修改类而不复制类并重命名来重新使用类,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9693278/

相关文章:

css - 更少的设置不起作用

html - 在 Bootstrap 中更改悬停效果和字段选择的样式

html - 内联 block 无法按预期使用 div

具有渐变和渐变轮廓的 CSS 文本

css - rails : How to add "style=" in grouped_select in simple form

javascript - CSS3 列的第 n 个子元素

css - 更少的 CSS 变量封装和可重用的混合

css - 文本开始溢出时如何使用动态替换文本?

css - CSS选择器中的空格是什么意思?即.classA.classB和.classA .classB有什么区别?

javascript - 单击链接时如何在 jQuery 中显示具有自己 id 的特定 div?