Writing Efficient CSS

body{
    background-image: url("img_tree.gif");
    background-repeat: no-repeat;
    background-attachment: fixed;
}

<style>

 .circle:before {
                    content: ' \25CF';
                    font-size: 50px;
                    color: black;
                }
</style>

<span class="circle"></span>

img {
  mask-image: url(‘mask.png’) linear-gradient(-45deg,
                        rgba(0,0,0,1) 20%, rgba(0,0,0,0) 50%);
  mask-image: url(#masking); /*referencing to the element generated and defined in SVG code*/
} 

 .rotate {

  transform: rotate(-90deg);


  /* Legacy vendor prefixes that you probably don
                                

.box-one {
	width: 100px;
	margin: 0 auto;
}

.box-two {
	width: 100px;
	margin-left: auto;
    margin-right: auto;
}

.truncate {
  width: 250px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/*EX:.container {
    padding: 0 15px;
// 576px window width and more
    @include sm {
        padding: 0 20px;
    }
// 992px window width and more
    @include lg {
        margin-left: auto;
        margin-right: auto;
        max-width: 1100px;
    } */

// Small tablets and large smartphones (landscape view)
$screen-sm-min: 576px;

// Small tablets (portrait view)
$screen-md-min: 768px;

// Tablets and small desktops
$screen-lg-min: 992px;

// Large tablets and desktops
$screen-xl-min: 1200px;


// Small devices
@mixin sm {
   @media (min-width: #{$screen-sm-min}) {
       @content;
   }
}

// Medium devices
@mixin md {
   @media (min-width: #{$screen-md-min}) {
       @content;
   }
}

// Large devices
@mixin lg {
   @media (min-width: #{$screen-lg-min}) {
       @content;
   }
}

// Extra large devices
@mixin xl {
   @media (min-width: #{$screen-xl-min}) {
       @content;
   }
}

<h1 class="ribbon">
   <strong class="ribbon-content">Everybody loves ribbons</strong>
</h1>

.dynamic-shadow {

  position: relative;

  width: rem;

  height: 10rem;

  background: linear-gradient(5deg, #d7ff, #00ffb8);
6
  z-index: 1;
7
}
8
.dynamic-shadow::after {

  content: '';
10
  width: 100%;

  height: 100%;

  position: absolute;

  background: inherit;

  top: 0.5rem;

  filter: blur(0.4rem);

  opacity: 0.7;

  z-index: -1;

}

​

 add_filter( 'jetpack_sharing_counts', '__return_false', 99 );
add_filter( 'jetpack_implode_frontend_css', '__return_false', 99 );
                                

ol li {
	 list-style-type: none;
     }
     
// OR

li {
	list-style-type: none;
}

.gradient {
  background-image:
    linear-gradient(
      to right, 
      red, 
      blue,
      yellow, 
      green
    );
}

.center {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
  border: 3px solid green;
}

/* the navbar-brand has two <span> children. The first contains the 'C'. The second contains the 'utespot' */
/* target the siblings of the first span in .navbar-brand */
.navbar-brand span + span {
	margin-left: 5px;
	/* we change the letter spacing to negative, so that the letters bunch up on top of each other. We use 'em' so that the spacing is relative to the element's font-size */
	letter-spacing: -0.52em;
	/* make it disappear */
	opacity: 0;
	/* we want it to animate -- just means move. when a css attribute changes, it will 'tween' between its old value and its new */
	/* we could target the transition to just work on opacity and letter-spacing, but 'all' is quick here*/
	transition: all 0.3s ease-out;
}

.navbar-brand:hover span + span {
	/* on hover, we spread the letters out again */
	/* since we set the transition (animate) to apply to all attributes, this change in letter-spacing will be animated (from its old value of -0.52em to its new of 0.1em) */
	letter-spacing: 0.1em;
	/* make it visible -- the transition:all will also apply to the opacity, so the opacity will also animate between its old value (0 - transparent) and its new (1 - opaque)*/
	opacity: 1;
}

element::after {
	/* ::before and ::after are pseudo-elements, and require a content attribute to exist. Often, we make it empty, because we are using these pseudo-elements to do funky little visual UI tricks, that have no content within. Also, mixing content and style feels wrong. */
	content: "";
	/* border on the bottom */
	border-bottom: 1px solid black;

	/* All the following is positioning stuff. It is absolute, so it is out of the flow, and we can put it wherever we want. We are putting it at the bottom of its (relative) parent, and we position its left-side 50% across the width of its parent (from the left). */
	position: absolute;
	width: 60%;
	bottom: 0;
	left: 50%;
	/* THEN we use the transform:translate to move it back to the left, but this time, just 50% of its OWN width. The effect of moving it right 50% of its parent, and left 50% of its own width, centers it in its parent. magic! */
	transform: translate(-50%, 0);
}