Order summary card solution

There are a couple of naming convention you can follow, but i could suggest using BEM..

I always take specificity into account when choosing between classes, IDs or descendant selector because i aim to reduces the specificity as much as I can

Once you have mastered the BEM notation (and Sass), I suggest you familiarise yourself with the 7-1 method of organising code; it is very useful for more complex projects.

https://www.learnhowtoprogram.com/user-interfaces/building-layouts-preprocessors/7-1-sass-architecture

Hello Marija Havaic, congratulations for your solution!

Answering your question:

1.Naming classes: I mainly try to name my classes, trying to be clear about what these classes do or for which kind o element block I'm using. For example, a class called .rounded adds border-radius in various elements or the class .container, which is used to group some elements and give them properties like margins, paddings, background, etc.

You consider using the BEM methodology for CSS class naming, is widely used in the dev community and maybe the most famous of all methodologies.

You can read more about BEM here: http://getbem.com/introduction/

2.Class x Descendant Combinator: I think that if you're coding something simple like this card, maybe you can use the element itself like an img or a p, but if something complex with many elements that repeat over the page like images, headings and etc. It's better to use class and manipulate each element separated.

I hope it helps you; happy coding!

Hello @marijahavaic ,

There is convention use with SASS Pre-processor called BEM , more details here :

https://en.bem.info/methodology/

In hope it helps !