Im defo being stupid but please help? Thanks

Its the BEM naming convention. Which stands for Block, Element, Modifier. The purpose and usage of the naming convention are to consider a block element (a container of elements) as the block:

.nav { /* think of this as a ul element for a navigation */
/* this will be the block */
}

the __ will represent the element inside of the block element. So for example, a list item.

.nav__item { /* a list item */

}

the modifier -- represents an element that may have a different style/modification to others. For example, you may want a list item's text color to be orange instead of another color of the rest:

.nav__item .nav__item--orange {
  color: orange;
}

The goal here is to keep the block name the same (nav) and include it to the element (e.g. nav_item) and the modifier (nav_item--orange).

Changing this in any way kind of defeats the object of using this naming convention. The great combination of BEM and Sass makes it even easier to target elements.

For example, instead of repeating yourself when targeting these elements, you could use one rule to target elements of the block (parent). Let's use the above example nav:

.nav { // the block element (e.g. ul)
...
  &__item { // nav__item class (e.g. li)
  ... 
    &--orange { // orange modifier of the nav__item class
    ...
    }
  }
  &__link { // nav__link class (e.g. an anchor element inside the nav__item (li)
  ...
  }
}

This is a great resource for explanation and examples of using BEM. I used this to help me understand it and use it!