基于外部修饰符类的条件CSS-好的做法?
简介/背景:CSS组件 对于一个相对较大的网站,我们正在与SASS合作,并尝试管理组件中的CSS。组件的基本思想是,组件在任何地方都应该看起来相同,而与DOM中更远的容器元素无关。 因此,我们要避免这样的事情(SASS): // User picture component. .user-picture { img {..} } // Override user picture for the frontpage. body.page-front .user-picture img {..} 相反,如果我们希望用户图片在首页上看起来有所不同,则它必须是不同的组件。例如,具有SASS继承或具有mixin: // User picture component. .user-picture { img {..} } // User picture on frontpage. .user-picture-front { @extend .user-picture; img {..} } 然后,我们需要调整首页上的html,以便它使用不同版本的用户图片。 到目前为止,一切都很好。我将以上内容发布为一个示例,以说明我对CSS组件的当前了解。 问题:修饰符类-好的做法? 现在我们遇到了一个问题:某些页面的背景为深色(黑色),因此文本,边框和内容必须为白色。 这在某种程度上超出了组件:默认情况下,同一组件应具有深色文本,但是如果它位于具有深色背景的容器中,则应具有白色文本。 …