It make our class name unnecessary long and it create a structure dependency. In the exemple case this is not such a problem, since item will always be a child of menu but consider the following exemple :
.ga-nav{
&__right-column{
&__search-form{/* don't */
/* output .ga-nav__right-column__search-form */
}
}
}
Here we are tied to use the search-form inside the right column.
If a change is required, the css need to be updated and this is a breaking change.
Instead do :
.ga-nav{
&__menu{
/* output .ga-nav__menu */
}
&__item{/* do */
/* output .ga-nav__item */
}
}
or :
.ga-nav{
&__right-column{
/* output .ga-nav__right-column */
}
&__search-form{
/* output .ga-nav__search-form */
}
}
Or if you really think that the class name require a reminder of the parent element :