Add a desktop override mixin #31
Conversation
|
Is there any risk in forcing a particular id on the head tag? Anyone know of a scenario in which an existing id might be present and require changing the selector that this uses? |
|
I like this id on head idea. When would you ever have one? I can think of no scenarios. If we absolutely must, maybe we let the selector be passed as a variable to the mixin. |
|
@kpeatt That’s what I was thinking too. Oh, and one more thing: I realized what we should call this:
|
|
Lool. |
|
Let's add the ability to specify selector and then I think this is GtM™. |
|
OK, I’ll add that in. |
…comments to better explain how the hack works.
|
The way it's written, I think you have to use the include completely unnested. Is it possible to be written in a way that it can be used nested? Example... .t-pdp {
@include style-override(1) {
.client-class {}
}
}Which I believe outputs... .t-pdp #\! ~ body .client-class {} |
|
The only way this works is if the template classes are added on |
|
Of course, you can get around it by either wrapping the mixin around all of .t-pdp { /* styles */}
@include style-override() {
.t-pdp { /* styles requiring override */ }
}In a long template stylesheet this could become confusing. On EBT I’ve just been wrapping the entire partial. |
|
@ry5n I rewrote this to use |
|
Changes here look good. Question depends on how quickly we want to go to 3.4 and deal with the new variable scope etc. |
|
@ry5n I don't think the new variable scope is anything to be concerned about. Biggest question for me is whether we can lock dependencies in the future. |
|
OK cool. Let’s wait to see what T and co. can do on that front before committing to this. |
|
@tedtate Thoughts on this? |
Add a desktop override mixin
|
@ry5n Just going ahead and releasing this. |
On level 1 sites we often need to style on top of some truly gnarly existing CSS. This mixin helps overcome extreme speficicity while otherwise allowing us to maintain our normal CSS standards. It also avoids the temptation to use !important for this purpose, keeping it in reserve for when it’s really necessary.
Status: Ready to merge
Reviewers: *@kpeatt @jeffkamo @tedtate *
Changes
<body>, not just within<div id="x-root">.!on the<head>tag across all pages:<head id="!">. This id was chosen to be short (since it’s prependedntimes to every selector) and obscure (it’s a special character and must be escaped for use in CSS or JS).How to test-drive this PR