CSS Lifehacks and hints that we collected working on our Clients projects

Sometimes we just deal with elements that don't have classnames and need still to apply CSS this is how:

.MyClass1[data-widget-type="MyWidgetType1"]

Considered to be a good practice but pretty easy to loose some, this snippet handles links automatically based on attribute value

a[target="_blank"]::after {
        content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAQElEQVR42qXKwQkAIAxDUUdxtO6/RBQkQZvSi8I/pL4BoGw/XPkh4XigPmsUgh0626AjRsgxHTkUThsG2T/sIlzdTsp52kSS1wAAAABJRU5ErkJggg==);
        margin: 0 3px 0 5px;
}

Shocking but true, CSS can also amend the actual content (visible to user ofc) we are going to use after its a pseudo element.
Visibility modifier will show the new text.

Example:

.toBeReplaced {
    visibility: hidden;
    position: relative;
}
.toBeReplaced: after {
    visibility: visible;
    position: absolute;
    top: 0;
    left: 0;
    content: "This text replaces the original.";
}
<p class="toBeReplaced">Old Text</p>

For example we want a container to be scrollable and to show that nicely we can use inner shadow. To achieve effect like on image below:

We are going to use hint from here - https://stackoverflow.com/questions/12081814/have-an-issue-with-box-shadow-inset-bottom-only

Inset Shadow on scrollable container

.product-list-wrapper {
    height: 500px;
    overflow-y: scroll;
    position: relative;
      .bottom-shadow{
        -moz-box-shadow: inset  0 -20px 20px -20px grey;
        -webkit-box-shadow: inset  0 -20px 20px -20px grey;
        box-shadow: inset  0 -20px 20px -20px grey;
        position:sticky;
        bottom:0;
        height: 20px;
        width:100%;
        display:block;
      }
}

While things are changing rapidly in this space we still have some basics and those mixins are so far best and most useful way to setup breakpoints

To see boundaries of elements and figure out nesting we need sometimes to apply so called onion skin this snippet shows a version that do not add any new borders and do not interrupt layout itself

Sublime is my favorite IDE (I'm alone btw in this and in general we use VSCode ofc) this plugin allows to populate CSS skeleton from injected HTML structure based on the classnames already used there.

https://packagecontrol.io/packages/eCSStractor

This is our way to spot problems in the layout right away before migrating it to our headless storefront

https://chrome.google.com/webstore/detail/bootstrap-grid-for-any-we/ngjnlpkfccnglmlobafmobgjoiiliden/related

Found this gem on StackOverflow ofc

<div class="cu-dashboard-table scroll-vertical">
  <div class="cu-dashboard-table scroll-horizontal">
    <!-- Scroll content here --> 
  </div>
</div>

&__scroll {
  &-horizontal {
    overflow-x: auto;
    width: 100%;
    -webkit-overflow scrolling: touch;
  }
  &-vertical {
    overflow-y: auto;
    height: 100%;
    -webkit-overflow-scrolling: touch;
}
}