Really great job on being so descriptive with your class naming! You might be interested in adopting BEM to help you avoid naming conflicts. It is very similar to how you went about naming your classes.
I would, however, caution you against using class names that describe position of that element in relation to the rest of the webpage (i.e a head-right class) because when you begin working on web pages that have more than one webpage, pages head-right can mean a lot of things so this could results in conflicts.
By the cascading nature of CSS, naming conflicts will result in styles being overwritten and the expected result may not be what you had expected. Methodologies like BEM aim to reduce the chances of such naming conflicts and help you organize your code so it's more readable and more descriptive.
This will also help you in the long run because you don't have to constantly refer back to your HTML to see what the name of a specific class and when working on a large code base reduce the chances of naming conflicts.
Really great job on being so descriptive with your class naming! You might be interested in adopting BEM to help you avoid naming conflicts. It is very similar to how you went about naming your classes.
I would, however, caution you against using class names that describe position of that element in relation to the rest of the webpage (i.e a
head-rightclass) because when you begin working on web pages that have more than one webpage, pageshead-rightcan mean a lot of things so this could results in conflicts.By the cascading nature of CSS, naming conflicts will result in styles being overwritten and the expected result may not be what you had expected. Methodologies like BEM aim to reduce the chances of such naming conflicts and help you organize your code so it's more readable and more descriptive.
This will also help you in the long run because you don't have to constantly refer back to your HTML to see what the name of a specific class and when working on a large code base reduce the chances of naming conflicts.