### Author:  [@kat](https://forum.pinegrow.com/u/kat)
#### Post date: [November 6, 2020, 9:16pm UTC](https://forum.pinegrow.com/t/css-class-best-practice/4655/1 "2020-11-06T21:16:34Z")
Is there a best practice for setting up my css class selectors? Mine are looking really untidy.
``
---
### Author:  [@red-rosefields](https://forum.pinegrow.com/u/red-rosefields)
#### Post date: [November 6, 2020, 10:27pm UTC](https://forum.pinegrow.com/t/css-class-best-practice/4655/2 "2020-11-06T22:27:08Z")
Try BEM method
> **[BEM — Block Element Modifier](https://getbem.com/)**
>
> BEM — Block Element Modifier is a methodology, that helps you to achieve reusable components and code sharing in the front-end.
[ ](https://www.youtube.com/watch?v=er1JEDuPbZQ)
---
### Author:  [@RobM](https://forum.pinegrow.com/u/RobM)
#### Post date: [November 7, 2020, 10:25am UTC](https://forum.pinegrow.com/t/css-class-best-practice/4655/3 "2020-11-07T10:25:38Z")
If you are still using Foundation for your site, be careful that you only use BEM for your custom classes. Remember that Foundation uses kebab-case. Mixing the two might prove a bit challenging.
---
### Author:  [@red-rosefields](https://forum.pinegrow.com/u/red-rosefields)
#### Post date: [November 7, 2020, 12:11pm UTC](https://forum.pinegrow.com/t/css-class-best-practice/4655/4 "2020-11-07T12:11:58Z")
right! I use BEM mostly on projects build from scratch. No frameworks.
---
### Author:  [@martonlente](https://forum.pinegrow.com/u/martonlente)
#### Post date: [November 9, 2020, 11:45am UTC](https://forum.pinegrow.com/t/css-class-best-practice/4655/5 "2020-11-09T11:45:03Z")
Hello @kat,
Read this: [https://cssguidelin.es/](https://cssguidelin.es/) This CSS style guide by Harry Roberts not only covers class naming, and code formatting concepts, but really high level advice on how you should architect your code for the web. It’s probably the one source I’ve learnt the most from in web development, and I follow these concepts in all my projects.
Kind regards,
Márton Lente
---
### Author:  [@RobM](https://forum.pinegrow.com/u/RobM)
#### Post date: [November 9, 2020, 12:32pm UTC](https://forum.pinegrow.com/t/css-class-best-practice/4655/6 "2020-11-09T12:32:05Z")
@martonlente That is a really nice guide! A lot of interesting points. Still don’t like BEM, but he makes a good case.
---
### Author:  [@kat](https://forum.pinegrow.com/u/kat)
#### Post date: [November 10, 2020, 2:05am UTC](https://forum.pinegrow.com/t/css-class-best-practice/4655/7 "2020-11-10T02:05:57Z")
I’m 2/3 of the way thru [https://cssguidelin.es/](https://cssguidelin.es/). This is great, Marton!. Below is what I was looking for, but got so much more.
```auto
body.home div.header ul { }
```
…is a far less efficient selector than:
```auto
.primary-nav { }
```
This is because browsers read CSS selectors **right-to-left**. A browser will read the first selector as
- find all `ul` elements in the DOM;
- now check if they live anywhere inside an element with a class of `.header` ;
- next check that `.header` class exists on a `div` element;
- now check that that all lives anywhere inside any elements with a class of `.home` ;
- finally, check that `.home` exists on a `body` element.
The second, in contrast, is simply a case of the browser reading
- find all the elements with a class of `.primary-nav` .
---
### Author:  [@martonlente](https://forum.pinegrow.com/u/martonlente)
#### Post date: [November 10, 2020, 4:15pm UTC](https://forum.pinegrow.com/t/css-class-best-practice/4655/8 "2020-11-10T16:15:08Z")
Hello @kat,
I’m glad you found it useful! 🙂
If you’re interested to learn even more in these topics, I suggest you have a look at [https://webfieldmanual.com/](https://webfieldmanual.com/) . You’ll find lots of great content, and coding best practices there.
Kind regards,
Márton Lente
---
### Author:  [@kat](https://forum.pinegrow.com/u/kat)
#### Post date: [November 10, 2020, 5:39pm UTC](https://forum.pinegrow.com/t/css-class-best-practice/4655/9 "2020-11-10T17:39:49Z")
I want to finish [https://cssguidelin.es/](https://cssguidelin.es/) then back to javascript. So I’ll put off your kind suggestion on [https://webfieldmanual.com/](https://webfieldmanual.com/)
Last 2 months I was watching lynda tutorials which culminated in a WP child theme [https://FunkyHistory.com](https://FunkyHistory.com)
My big challenge for javascript practice was trying to set up Atom or VSC for a remote server. Didn’t work, but VSC with PG’s browser preview seems to do the job.
My learning path is a bit muddled. At least I have Bob’s tutorials to fall back on. I’m currently watching his Timeline tutorial and am looking forward to playing with tailwind.