Skip to content

Instantly share code, notes, and snippets.


Johnathan Kent johnathankent

View GitHub Profile

Keybase proof

I hereby claim:

  • I am johnathankent on github.
  • I am johnathankent ( on keybase.
  • I have a public key ASBlOBMrTVh0t1JtSxgcDX-zjc1KcTLUqLJhZxQZT6CqEwo

To claim this, I am signing this object:

johnathankent / picard.vue
Last active Oct 3, 2017
Reactive Style Specificity using custom attributes (hack)
View picard.vue
<!-- picard.vue -->
<wesley :class="$style.shutupwesley" data-says-because-picard-said-make-it-so><!-- <<== Added custom data-attr here -->
import wesley from './wesley.vue'
export default {
johnathankent / index.html
Created Oct 3, 2017
Reactive Style Specificity using custom attributes
View index.html
<div id="starship-enterprise">
<h1>Reactive Style Specificity using custom attributes...</h1>
<h2>A possible problem causing, yet simple hack.</h2>
<p>Using non-props attributes or data-attributes to make parent CSS more specific in the case where parent adds colliding specificity to the child root.</p>
<p><em><strong>Disclaimer</strong>: I don't recommend it because adding attributes to strong arm css control outside of the normal reactive JavaScript or CSS handling is not a well-known pattern, and this means possible confusion for teams or unexpected behavior on CSS. It may also prevent reusability of or confusion on how to override, with the "who's in charge" problem when inception nesting components or reverse nesting components. <a href="">See here.</a></em></p>
<p><strong>Demo</strong>: Open up the your browser developer inspector tools to see the child text being overriden by the parent component in the box below.</p>
<p class="css-control picar
View index.html
<!DOCTYPE html>
<link href="" rel="stylesheet" type="text/css" />
<link href="" rel="stylesheet" type="text/css" />
<script src=""></script>
<script src=""></script>
<meta charset="utf-8">
<title>JS Bin</title>
View ga-ratio.js
// Create the test
var pixelRatio = (window.devicePixelRatio >= 1.5) ? "high" : "normal";
// Pass it along through GA
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-xxxxxxxx-x']);
// params: event method, custom variable slot, variable name, variable value, scope level