Cacher is the code snippet organizer for pro developers

.block {}
.block__element-name {}
.block__element-name--modifier {}


7-1 pattern

7 partial files, 1 main file to import those 7 to compile into css

-----------

base/ 

animations:
  
          @keyframes moveInLeft {
              0% {
                  opacity: 0;
                  transform: translateX(-10rem);
              }
          
              80% {
                  transform: translateX(1rem);
              }
          
              100% {
                  opacity: 1;
                  transform: translate(0);
              }
          }

base:

        *,
        *::after,
        *::before {
            margin: 0;
            padding: 0;
            box-sizing: inherit;
        }
        
        html { /* root */
        
            /* 62.5% - will be % from default browsers's size which is usually 16px, so now it's 10px*/
        
            font-size: 62.5%; //1 rem = 10px; 10px/16px = 62.5%
        
            @include respond(tab-land) { //width < 1200?
                font-size: 56.25%; //1rem = 9px; 9px/16px = 56.25%;
            }
        
            @include respond(tab-port) { //width < 900?
                font-size: 50%; //1rem = 8px; 8px/16px = 50%
            }
        
            @include respond(big-desktop) {
                font-size: 75%; //1rem = 12px; 12px/16px = 75%;
            }
        }

        body {
            box-sizing: border-box; /* borders and paddings are no longer added to the total width/height of the element*/
            padding: 3rem; /* white line around a web page */
        
            @include respond(tab-port) {
                padding: 0;
            }
        }
        
        ::selection {
            background-color: $color-primary;
            color: $color-white;
        }

typography:

        body {  /*efficient way to make all child elements inherit a property, fonts should always be in the body*/
            font-family: "Lato", sans-serif;
            font-weight: 400;
            font-size: $default-font-size;
            line-height: 1.7;
            color: $color-dark-grey;
        }

utilities:

      .u-center-text {text-align: center !important;}

------------

components/
reusable components 

-----------

layout/ 
footer, header, navigation. Things that are the same in different pages of the same web

-----------

pages/
home: stuff that is specific to pages of the same web, for example: 
        .section-about {
            background-color: $color-grey-light-1;
            padding: 25rem 0;
            margin-top: -20vh;
        
            @include respond(tab-port) {
                padding: 20rem 0;
            }
        }

-----------

themes/
if there are a few themes for the same web, theme related files

-----------

abstracts/
functions: 
mixins: 

        @mixin clearfix { //create a pseudo element to fix height of an element whose height is 0px because children are floated
            &::after {
                content: "";
                display: table;
                clear: both;
            }
        }
        
        @mixin center-hor-vert {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
        
        
        @mixin respond($breakpoint) {
            @if $breakpoint == phone {
                @media only screen and (max-width: 37.5em) {@content}; //600px ONLY SCREEN means it's applied to screens only, printing for instance will be different this way
            }
            @if $breakpoint == tab-port {
                @media only screen and  (max-width: 56.25em) {@content}; //900px
            }
            @if $breakpoint == tab-land {
                @media only screen and  (max-width: 75em) {@content}; //1200px
            }
            @if $breakpoint == big-desktop {
                @media only screen and  (min-width: 112.5em) {@content}; //1800px
            }
        }

variables: 
        $color-primary: #55c57a;

-----------

vendors/

        possibly third party stuff, like library that is used,etc

-----------