# Creating and Organizing CSS Rules
**URL:** https://forum.pinegrow.com/t/creating-and-organizing-css-rules/3278
**Category:** Styling (CSS)
**Tags:** tutorial, css, tool
**Created:** [August 25, 2019, 11:29pm UTC](https://forum.pinegrow.com/t/creating-and-organizing-css-rules/3278 "2019-08-25T23:29:00Z")
**Posts on this page:** 11
**Page:** 1
### Author:  [@droidgoo](https://forum.pinegrow.com/u/droidgoo)
#### Post date: [August 25, 2019, 11:29pm UTC](https://forum.pinegrow.com/t/creating-and-organizing-css-rules/3278/1 "2019-08-25T23:29:00Z")
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
> **[CSS Naming Conventions that Will Save You Hours of Debugging](https://www.freecodecamp.org/news/css-naming-conventions-that-will-save-you-hours-of-debugging-35cea737d849/)**
>
> I have heard lots of developers say they hate CSS. In my experience, this comes
> as a result of not taking the time to learn CSS.
>
> Korean ??
>
> 알림: 한국인 독자분들을 위해 본 기사는 한국어로 번역되었으며, 한국어 버전은 여기
> \[https://www.vobour.com/-css-디버깅-시간을-절약-할-수있는-css-명명-규칙\]에서 보실...
anyone do this?
BEM : block\_\_element–modifier
---
### Author:  [@schpengle](https://forum.pinegrow.com/u/schpengle)
#### Post date: [August 26, 2019, 11:40am UTC](https://forum.pinegrow.com/t/creating-and-organizing-css-rules/3278/2 "2019-08-26T11:40:28Z")
Hi there, yep, there are all sorts of differing policies on this.
enter this in google, I just did and it was fab 🙂
**semantic css naming conventions**
**[https://duckduckgo.com/?q=semantic+css+naming+conventions&bext=msl&atb=v1-1&ia=web](https://duckduckgo.com/?q=semantic+css+naming+conventions&bext=msl&atb=v1-1&ia=web)**
ok, …I lied, I use [duckduckgo.com](http://duckduckgo.com) (Screw your tracking policies google)
But, hey the results are the same 🙂
---
### Author:  [@droidgoo](https://forum.pinegrow.com/u/droidgoo)
#### Post date: [August 26, 2019, 1:54pm UTC](https://forum.pinegrow.com/t/creating-and-organizing-css-rules/3278/3 "2019-08-26T13:54:57Z")
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?
---
### Author:  [@Pervasive](https://forum.pinegrow.com/u/Pervasive)
#### Post date: [August 29, 2019, 11:41pm UTC](https://forum.pinegrow.com/t/creating-and-organizing-css-rules/3278/4 "2019-08-29T23:41:27Z")
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.
---
### Author:  [@Pervasive](https://forum.pinegrow.com/u/Pervasive)
#### Post date: [August 29, 2019, 11:50pm UTC](https://forum.pinegrow.com/t/creating-and-organizing-css-rules/3278/5 "2019-08-29T23:50:24Z")
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.
---
### Author:  [@Printninja](https://forum.pinegrow.com/u/Printninja)
#### Post date: [September 4, 2019, 2:26am UTC](https://forum.pinegrow.com/t/creating-and-organizing-css-rules/3278/6 "2019-09-04T02:26:57Z")
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.
---
### Author:  [@KatarinaGrumy](https://forum.pinegrow.com/u/KatarinaGrumy)
#### Post date: [November 25, 2019, 2:58pm UTC](https://forum.pinegrow.com/t/creating-and-organizing-css-rules/3278/7 "2019-11-25T14:58:12Z")
You’ve recommended a good article.
---
### Author:  [@droidgoo](https://forum.pinegrow.com/u/droidgoo)
#### Post date: [November 25, 2019, 7:17pm UTC](https://forum.pinegrow.com/t/creating-and-organizing-css-rules/3278/8 "2019-11-25T19:17:06Z")
i found this one helpful too
> **[Object-Oriented CSS: What, How, and Why](https://code.tutsplus.com/tutorials/object-oriented-css-what-how-and-why--net-6986)**
>
> It sounds like an oxymoron, or at least an impossibility, doesn't it? How can a static language that's really more like markup than programming be object-oriented? In this tutorial, I'm going to...
---
### Author:  [@Pervasive](https://forum.pinegrow.com/u/Pervasive)
#### Post date: [November 26, 2019, 4:27am UTC](https://forum.pinegrow.com/t/creating-and-organizing-css-rules/3278/9 "2019-11-26T04:27:11Z")
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.
---
### Author:  [@schpengle](https://forum.pinegrow.com/u/schpengle)
#### Post date: [November 26, 2019, 8:46am UTC](https://forum.pinegrow.com/t/creating-and-organizing-css-rules/3278/10 "2019-11-26T08:46:55Z")
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… 🙂
---
### Author:  [@droidgoo](https://forum.pinegrow.com/u/droidgoo)
#### Post date: [November 26, 2019, 7:40pm UTC](https://forum.pinegrow.com/t/creating-and-organizing-css-rules/3278/11 "2019-11-26T19:40:28Z")
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.