给一个div的子元素添加颜色的良好做法是什么?

huangapple go评论64阅读模式
英文:

Which is good practice for giving color to a div's childs?

问题

这个问题不是基于意见的。我想从专业前端开发人员那里得到"最佳实践"的答案。我的新公司要求我"如果一个元素在一个 div 内,不要给那个 div 添加 '颜色',而是具体地给它的子元素添加。" 他们的意思是:

不要这样做:

.parent {color: white}

要这样做:

.parent p {color: white}

然后他们要求我不要使用多个选择器:

不要这样做:

.parent .card .title h2

所以当我问他们这样做的目的是什么时,他们告诉我他们以后可以使用我写的代码,但如果我这样写,他们不能在另一个网页中使用它。

问题:

  • 如果一个 div 的子元素颜色相同,我应该具体写颜色给每个子元素,还是应该使用:
.parent {color: black}
  • 我的雇主的第二个要求是无稽之谈还是一个有效的要求?
英文:

This question is not an opinion based. I want to get short of "best practice" answer from professional frontends. My new firm asked me to "if a element is inside a div do not give 'color' to that div but specifically give to the child element of it." they meant: <br>
dont <br>
> .parent {color: white} <br>

do <br>

> .parent p {color: white} <br>

and then they asked me to don't use multiple selectors: <br>
they meant don't to this: <br>

> .parent .card .title h2 <br>

So when I asked what is the purpose of this they told me they could use the code I wrote later and if I write like this they cant use it in another webpage. <br>

Questions <br>

  • If a div's childs are the same color, should I specifically write to colors to each child elements or should I use <br>
    > .parent {color: black} <br>
  • Is my employer's second request nonsense or a valid request?

答案1

得分: 1

根据我的经验,你的第一个示例(.parent { color: white })相对有效且相当常见;然而,它确实依赖于继承。如果明天你的客户(或其他人)决定不希望这个子元素位于.parent内部怎么办?如果他们希望它位于页面的不同部分怎么办?依赖这种继承的代码通常更难更改 - 尽管在小规模示例中可能无关紧要,或者通常我们编写样式“组件”,例如按钮或卡片,使用继承可能是有道理的。

近年来,采用类似TailwindCSS的方法并创建实用类(例如.white-text)已经变得越来越常见,这些类可以独立于页面标记的结构使用。实际上,我会说类似TailwindCSS这样的库/工具变得越来越受欢迎,正是因为它们不依赖于你的标记方式,就像传统的CSS工具一样,它们创造了流动性并允许轻松更改。

至于第二个要求,我认为问题类似,还涉及到雇主所提到的可重用性。类似.parent .child h2 span这样的选择器将在页面结构稍微改变时失效,并要求你每次想更改HTML时都在多个地方进行更改。

英文:

In my experience, your first example (.parent { color: white }) is relatively valid and pretty common; however, it is true that it relies on inheritance. What if tomorrow your client (or someone else) decides that they don't want this child to be inside of .parent? What if they want it on a different part of the page? Code that relies on inheritance like this can often be harder to change - though it is true that it might not matter in a small-scale example, or that often we write style "components", i.e. a button or a card, in which it would make sense to use inheritance.

In recent years, it's become more and more common to take the sort of TailwindCSS-like approach and create utility classes, such as .white-text, which can be used independent of how the markup on the page is structured. In fact, I'd say that libraries/tools like TailwindCSS have become more and more popular precisely because they aren't reliant on your markup the way traditional CSS tools are, and they create fluidity and allow easy changes.

As for the second request, I think it boils down to something similar, along with the reusability you employer was talking about. Something like .parent .child h2 span will break if the page itself is changed even slightly, and requires you to make changes in multiple places every time you want to change the HTML.

huangapple
  • 本文由 发表于 2023年4月7日 00:35:46
  • 转载请务必保留本文链接:https://go.coder-hub.com/75951816.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定