mciastek

.text {
  // compiles to .article .text
  .article & {
    color: $text;
  }
  
  // compiles to .text + .text
  & + & {
    margin-top: 15px;
  }

mciastek

// Before
.action-button {
  height: 30px;
  z-index: 3;
  background-color: $accent;
  position: fixed;
  width: 30px;
  color: $white;
  bottom: 15px;
  right: 15px;

mciastek

// Bad
.menu {
  li {
    display: inline-block;
    padding: 0 20px;
    border-bottom: 1px solid $accent;
  }
  
  ul li {
    padding: 0 10px;

mciastek

.menu {
  &__item { // it compiles to .menu__item
    display: inline-block;
    padding: 0 20px;
    border-bottom: 1px solid $accent;
  }
}

.submenu {
  &__item {

mciastek

// target devices with min width of 768px (possibly tablets) and with wide screen
@media only screen and (min-width: 768px) and (max-device-aspect-ratio: 9 / 16) {
  body {
    font-size: 20px;
  }
}

mciastek

$medium: 768px;
$screen-medium-wide: 'only screen and (min-width: #{$medium}) and (max-device-aspect-ratio: 9 / 16)';

@media #{$screen-medium-wide} {
  body {
    font-size: 20px;
  }
}

mciastek

.article {
  &__title {
    color: $accent;
  }
  
  // Applies margin only, when .article__title is present
  &__title + &__text {
    margin-top: 15px;
  }
  

mciastek

const intersectionObserver = new IntersectionObserver((entries, observer) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      // element is in viewport, do the stuff
      
      // it's good to remove observer,
      // if you don't need it any more
      observer.unobserve(entry.target);
    }
  });

mciastek

const SELECTOR = '.item';
const ANIMATE_CLASS_NAME = 'animate';

const animate = element => (
  element.classList.add(ANIMATE_CLASS_NAME)
);

const isAnimated = element => (
  element.classList.contains(ANIMATE_CLASS_NAME)
);

mciastek

.item {
  opacity: 0;
  transition: opacity .2s;
}

.item.animate {
  opacity: 1;
}