Css class best practice?

Beginners
1

Is there a best practice for setting up my css class selectors? Mine are looking really untidy.
<div class="car columns filter-item sale--container large-3 small-6">

2

Try BEM method

3

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.

1 Like
4

right! I use BEM mostly on projects build from scratch. No frameworks.

5

Hello @kat,

Read this: 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

1 Like
6

@martonlente That is a really nice guide! A lot of interesting points. Still don’t like BEM, but he makes a good case.

2 Likes
7

I’m 2/3 of the way thru https://cssguidelin.es/ . This is great, Marton!. Below is what I was looking for, but got so much more.

body.home div.header ul { }

…is a far less efficient selector than:

.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 .
1 Like
8

Hello @kat,

I’m glad you found it useful! :slightly_smiling_face:

If you’re interested to learn even more in these topics, I suggest you have a look at https://webfieldmanual.com/ . You’ll find lots of great content, and coding best practices there.

Kind regards,
Márton Lente

9

I want to finish https://cssguidelin.es/ then back to javascript. So I’ll put off your kind suggestion on https://webfieldmanual.com/

Last 2 months I was watching lynda tutorials which culminated in a WP child theme 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.

1 Like