Creating and Organizing CSS Rules

The most intimidating thing about PG is the bewildering array of properties and options to fiddle with on, what amounts to the molecular level.

The introduction to PGv5 says this, “Creating maintainable CSS structure requires strategic thinking about properly naming and organizing CSS rules. That’s not something that an app can do for you.”

Message received, but where can someone find guidance on this sort of strategic thinking? Are there any axioms that PG users are adhering to?

Is this where SCSS, SASS, or LESS come into play?

I found this article on naming conventions about using BEM

anyone do this?

BEM : block__element–modifier

Hi there, yep, there are all sorts of differing policies on this.

enter this in google, I just did and it was fab :slight_smile:

semantic css naming conventions

ok, …I lied, I use (Screw your tracking policies google)
But, hey the results are the same :slight_smile:


use the duck!

yes, i went down that wormhole most of the day yesterday… lot’s of opinions out there.

and why is there no cusor in this text box?

cursor? what cursor?

ha! I have to send an empty message first before I can even begin to type a response.

If I am quoting someone it’s worse… I have to quote, select all, cut the quote, send, click in the reply box, change keyboards to paste, and then still type without any visible cursor.

And, oh yes, once I hit send I have to blindly type under the pop-over until the error message goes away.

Joy-of-joys! I thought I was the only one who had these problems… of course they are nothing compared to someone else’s horse problems.

My heart goes out to you and your critters.

1 Like

I tend to try and keep my rules organized in a hierarchical fashion. Adding Bootstrap into the mix makes for some interesting fun. And then there is inline CSS and !important¡ - - like everything else is not important or something!

And now just discovered that the emoticons are offscreen except for the first three… arg.

1 Like

Ehh… I write my CSS so it makes sense to me. Nobody else is fiddling with my code, Google doesn’t care about semantic vs non-semantic CSS, so as far as I’m concerned, it’s whatever works best for you.

You’ve recommended a good article.

1 Like

i found this one helpful too

The article is certainly different. I’ve been an oop since lisp and object pascal. The biggest difference is with oop everything is contained.

Kind of like, people (most) have arms, legs, bodies, and heads. And the different body parts have different functions. And walking and eating are procedures. Senses, and nerves, and message flow… yada-yada.

But alas, the closest you can get to containment and oop is inline code. But that defeats the whole purpose.

But I think css is certainly fine just the way it is. I kind of like pulling a different look for my site from the wardrobe from time to time.

Well, I saw the length of the article…so decided to go aaaalll the way down to the comments first, if it had any, to see what the others made of it.
I am glad I did it this way. I then also didnt think I would read the article!
Also, this was written 8-9 years ago.
A LOT has changed in css since then.

…Theeeen … I went back and read it anyway… :slight_smile:

1 Like

it is more philosophical than instructional, but it helped me organize my thinking around picking class names and organizing my CSS… it’s a bit meta

taken to the extreme, we basically get atomicCSS, and then you’re simply in the business or renaming the CSS keywords.

there’s a balance to be struck for sure.