Pantaley Stoyanov
LinkedIn | RSS
Vol. I ··· No. 1 Price: Free
dark mode

Start your JSS journey with the selectors cheat sheet.

By Pantaley Stoyanov
Start your JSS journey with the selectors cheat sheet.

I am not the hugest fan of JSS, because it’s too new for me, look strange and doesn’t have a decent auto-compilation (this one is the worst). But JSS has its solid advances. Here is a brief cheat sheet of the selectors I use the most and always forget:

Add encapsulation in the class, notice that in the CSS the class ends with “-0-1-626” which makes styles encapsulated.

container: {
  width: 1024;
}
 
.container-0-1-626 {
  color: 1024px;
}

Encapsulated class with nested selector. This is useful when you need to style framework component or library.

container: {
    '& .btn': {
      width: 500
    },
    // not working in IE6 or earlier
    '&.btn': {
      width: 500
    }
}
 
.container-0-1-626 .btn {
  width: 500px;
}
.container-0-1-626.btn {
  width: 500px;
}

Reference nested encapsulated classes

button: {},
container: {
    '& $button': {
        width: 500
    }
}
 
.container-0-1-626 .button-0-1-775 {
  width: 500px;
}

Extend properties

const maxWidth = {
  maxWidth: 1024
};

container: {
  extend: maxWidth;
  // an array example: extend: [background, color]
}
 
.container-0-1-626 {
  max-width: 1024px;
}

Use of global CSS selectors

'@global .container': {
    width: 500
},
'@global': {
    '.container': {
        margin: ['1rem', 5, 10, 15]
    },
    'html, body': {
        fontSize: 16
    }
}
 
.container {
  width: 500px;
}
.container {
  margin: 1rem 5px 10px 15px;
}
html,
body {
  font-size: 16px;
}

Use of media queries

'@media (min-width: 1024px)': {
    container: {
        padding: 10,
        border: { color: 'black', width: 1, style: 'solid' }
    }
}

// or

container: {
    '@media (min-width: 1024px)': {
        padding: 10,
        border: { color: 'black', width: 1, style: 'solid' }
    }
}
 
@media (min-width: 1024px) {
  .container-0-1-626 {
    border: 1px solid black;
    padding: 10px;
  }
}

Related Articles