I made up my own CSS best practise. Here’s the result

Once upon a time, when Facebook Applications and Facebook Tabs were popular, I was assigned a project to create a Facebook tab. A facebook tab is just a simple website and you can use any code you like, html, css, php… whatever you code web in.

And I decided to take very different approach, this time I said to myself “there are way more importanter things in life than thinking about css naming conventions, and I just proceeded with naming my class names with alphabetical character.

I mean, the body got a class a a first element inside that element got a class ab, then its sibling for ac -> a child of this one got .aca and it went on and on…

You can check the whole code in here:

/*default white-bordered button*/
.x {display: inline-block;border:2px solid white;background-color: transparent; font-size: 24px; -moz-transition:background 120ms ease-out; -webkit-transition:background 120ms ease-out;-ms-transition:background 120ms ease-out;transition:background 120ms ease-out;}
.x:hover {background-color: #b39359;}
.x:active {background-color: #ffa600;}

.x[aria-disabled="true"],
.x[aria-disabled="true"]:hover,
.x[aria-disabled="true"]:active {background-color: transparent; opacity: .3;}

.x-a {}
.x-a:after {display: block; content: ""; width: 13px; height: 23px; position: absolute; top: 50%; background: url('../../../gfx/images/btn-arrow.png') no-repeat 0 0;}

/** close button **/
.close {
display: inline-block;
font-size: 0;
text-indent: -9999px;
background: url('../../../gfx/images/close.png') no-repeat 0 0;
width: 24px;
height: 24px;
vertical-align: middle;
-moz-transition: -moz-transform 200ms ease-out;
-ms-transition: -ms-transform 200ms ease-out;
-webkit-transition: -webkit-transform 200ms ease-out;
transition: transform 200ms ease-out;

-moz-transform:rotate(0deg);
-webkit-transform:rotate(0deg);
-ms-transform:rotate(0deg);
transform:rotate(0deg);
}

.close:hover {
-moz-transition: -moz-transform 200ms ease-out;
-ms-transition: -ms-transform 200ms ease-out;
-webkit-transition: -webkit-transform 200ms ease-out;
transition: transform 200ms ease-out;

-moz-transform:rotate(90deg);
-webkit-transform:rotate(90deg);
-ms-transform:rotate(90deg);
transform:rotate(90deg);
}

/** header **/
.a {clear: both; width: 100%;}
.ab {width: 100%; background-color: #ffa600; overflow: auto}

/** header main navigation **/
.abc {float: right; font-size: 0; height: 55px;}

/** header navigation link **/
.abcd {display: inline-block; height: 55px; line-height: 55px; padding: 0 25px; background-color: transparent; -moz-transition:background 120ms ease-out; -webkit-transition:background 120ms ease-out;-ms-transition:background 120ms ease-out;transition:background 120ms ease-out;}
.abcd:hover,
.abcd.selected {background-color: #e88300;}

.abcd[aria-disabled="true"],
[aria-disabled="true"]:hover,
[aria-disabled="true"]:active {background-color: transparent;}

/** header logo **/
.abd {position: absolute; background-color: #e88300; top: 0; bottom: 0; height: 100%; display: block; width: 190px;}
.abda {position: absolute; top: 50%; margin-top: -15px; margin-left: -71px; left:50%;}

/** burger icon **/
.c {display: block; height: 55px; width: 55px; background: url('../../../gfx/images/small-mac.png') center center no-repeat; float: right; font-size: 0; text-indent: -9999px; -moz-transition:background 120ms ease-out; -webkit-transition:background 120ms ease-out;-ms-transition:background 120ms ease-out;transition:background 120ms ease-out;}
.c:hover,
.c.selected {background-color: #e88300;}

/** progress bar **/
.d {height: 55px; font-size: 0; line-height: 55px; float: right; margin-right: 160px;}
.da {display: inline-block; vertical-align: middle; width: 100%; font-size: 0;}


.daa {display: inline-block; width: 300px; margin-right: 15px; background-color: #e88300; padding: 2px; border-radius: 5px;}
.daac {display: block; height: 8px; border-radius: 4px; background-color: white; width: 10%; -moz-transition:width 200ms ease-out;-webkit-transition:width 200ms ease-out;-o-transition:width 200ms ease-out;-ms-transition:width 200ms ease-out;transition:width 200ms ease-out;}

/** score indicator 1/10 **/
.dab {display: inline-block; color: white;}


/** site content **/
.b {padding-top: 1px;}

/** main wrap **/
.ba {z-index: 2;}

/** main wrap inner **/
.baa {
height:651px;
background: url('../../../gfx/images/main-background.png') repeat center top;
text-align: center;
padding-top: 1px;
}
/** sidebar **/
.bb {
background-color: #e88300;
position: absolute;
right: 0;
top: 0;
bottom: 0;
height: 100%;
z-index: 3;
}

/** sidebar innerr **/
.bba {
padding: 10px;
}

/** sidebar buttons **/
.bbaa {display: block; text-align: center; height: 55px; line-height: 55px; width: 100%; background-color:transparent; margin-bottom: 1px; -moz-transition:background 120ms ease-out; -webkit-transition:background 120ms ease-out;-ms-transition:background 120ms ease-out;transition:background 120ms ease-out;}
.bbaa:hover,
.bbaa.selected {
background-color: #ffa600;
}

.bbaa[aria-disabled="true"],
.bbaa[aria-disabled="true"]:hover,
.bbaa[aria-disabled="true"]:active {background-color: transparent;}

.bbaa:after {
content: "";
display: block;
height: 1px;
position: absolute;
top: 100%;
left:0;
right: 0;
width: 100%;
background-color: #eea648;
}


/** not a fan **/
.pb {
position: fixed;
top: 0;
left: 0;
right: 0;
width: 100%;
height: 61px;
background: url('../../../gfx/images/header-blur.png') no-repeat center top;
}

/** image **/
.pbha {
position: absolute;
top: 10px;
right: 100px;
}

/** not a fan message **/
.phbct {text-align: center; font-size: 30px; line-height: 1.35em; margin-top: 150px;}
.phbct .orange {color: #ffa600; font-size: inherit; line-height: inherit;}

/** not a fan image **/
.pbhctpw {text-align: center; margin-top:50px;}

/**screens **/
.screen {display: none; position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 100%;}


/** screen default **/
.screen[data-screen="default"] {padding-top: 40px; text-align: center}
.screen-default-title {font-size: 48px;}
.screen-default-subtitle {line-height: 1.45em; margin-top:20px; font-size: 22px;}
.screen-default-prizes {margin:50px 0;}

.screen-default-bottom-text {font-size: 24px; margin-bottom: 12px; margin-top: -12px; line-height: 27px;}
.screen-default-bottom-text2 {font-size: 24px; margin-bottom: 18px; line-height: 27px;}
.screen-default-bottom-text .orange,
.screen-default-bottom-text2 .orange {font-size: inherit; line-height: inherit; color: #ffa600;}

.screen-default-button {padding: 20px 50px 20px 25px;}
.screen-default-button:after {top: 50%; right: 15px; margin-top: -10px;}

/** screen test-choice **/
.screen[data-screen="test-choice"] {}
.screen[data-screen="test-choice"] .screen-inner {padding-top: 190px;}
.screen-test-choice-title {font-size: 36px; margin: 0 0 30px;}
.screen-test-choice-tests {}
.screen-test-choice-button {margin: 0 7px; line-height: 1.2; width: 180px; text-align: center; padding-top: 13px; padding-bottom: 13px;}
.screen-test-choice-button.noposs {
opacity:0.4;
cursor:default;
}

/** screen about **/
.screen[data-screen="about"] {}
.screen[data-screen="about"] .screen-inner {padding-top: 30px;}

.screen-about-large {}
.screen-about-title {font-size: 25px; line-height: 29px;}
.screen-about-subtitle {font-size: 24px; line-height: 1.4;}

.screen-about-image {text-align: center; font-size: 0; margin:35px 0;}

.screen-about-list {list-style-type: none; padding-left:4%; margin-top: 35px;}
.screen-about-list:after {display: block; clear: both; content: ""; width: 100%;}
.screen-about-listitem {display: block; width: 29%; margin-left: 2%; margin-right: 1%; float: left; text-align: left;}

.screen-about-listitem-title {font-size: 24px; margin-bottom: 7px;}
.screen-about-listitem-description {line-height: 1.1em; font:13px "Open Sans", Helvetica, Arial, sans-serif; font-weight: 400;}

.screen-about-footer {margin-top: 35px;}
.screen-about-footer .x {padding:20px;}

/** screen test **/
.screen[data-screen="test"] {}
.screen[data-screen="test"] .screen-inner {padding-top: 10px;}
.screen[data-screen="test"] .m {display: inline-block; margin: 45px 0;}
.screen[data-screen="test"] .mm {border: 4px solid #ffa600; border-radius:50%; padding: 3px;}
.screen[data-screen="test"] .mmm {border:2px solid white; border-radius: 50%; height: 130px; width: 130px;}
.screen[data-screen="test"] #mma {display: block; padding-left: 5px;}
.screen[data-screen="test"] #mmaa {font-size: 80px;}
.screen[data-screen="test"] #mmab {font-size: 40px;}
.screen[data-screen="test"] .mmb {display: block; padding: 3px 0; border:1px solid #dcdbd7; border-left:0; border-right:0; color: #e6e5e3; margin-left: 20px; margin-right: 20px;}

/** question title**/
.screen[data-screen="test"] #maa {margin: 0 50px; font-family: "Open Sans",Helvetica, Arial, sans-serif; line-height: 1.35;}

/** buttons **/
.screen[data-screen="test"] .mb {margin: 25px 0;}
.screen[data-screen="test"] .mo {display: block; width: 100%; text-align: center; padding: 8px 0; background-color: #98845c; background-color: rgba(255,166,0,.20);}
.screen[data-screen="test"] .mo.second {background-color: #af8943; background-color: rgba(255,166,0,.40); -moz-transition:background 120ms ease-out; -webkit-transition:background 120ms ease-out;-ms-transition:background 120ms ease-out;transition:background 120ms ease-out;}
.screen[data-screen="test"] .mo:hover,
.screen[data-screen="test"] .mo.selected {background-color:#ffa600;}

.screen[data-screen="test"] .mo[aria-disabled="true"],
.screen[data-screen="test"] .mo[aria-disabled="true"].second,
.screen[data-screen="test"] .mo[aria-disabled="true"]:hover,
.screen[data-screen="test"] .mo[aria-disabled="true"] {background-color: #98845c; background-color: rgba(255,166,0,.20);}

.screen[data-screen="test"] .mo[aria-disabled="true"].second {background-color: #af8943; background-color: rgba(255,166,0,.40);}

.screen[data-screen="test"] .mo[aria-disabled="true"].selected {background-color:#ffa600;}

.screen[data-screen="test"] .x {padding: 15px 70px 15px 45px;}
.screen[data-screen="test"] .x:after {top: 50%; right: 15px; margin-top: -10px;}

/** screen loss **/
.screen[data-screen="loss"] {}
.screen[data-screen="loss"] .screen-inner {padding-top: 10px;}
.screen[data-screen="loss"] .r {margin-top: 32px; display: block;}
.screen-loss-title {margin: 25px 0; font-size: 36px;}
.screen-loss-subtitle {line-height: 1.35; font-size: 14px; font-family: "Open Sans", Helvetica, Arial, sans-serif;}
.screen-loss-footer {margin-top: 70px;}
.screen-loss-footer .x {padding: 20px 25px; margin-left: 15px; margin-right: 15px;}

/** screen win **/
.screen[data-screen="win"] {}
.screen[data-screen="win"] .screen-inner {padding-top: 10px;}
.screen[data-screen="win"] .r {margin-top: 32px; display: block;}
.screen-win-title {margin: 25px 0; font-size: 36px;}
.screen-win-subtitle {line-height: 1.35; font-size: 14px; font-family: "Open Sans", Helvetica, Arial, sans-serif;}
.screen-win-subtitle * {font:inherit;}
.screen-win-footer {margin-top: 70px;}
.screen[data-screen="win"] .x {padding: 15px 60px 15px 50px;}
.screen[data-screen="win"] .x:after {top: 50%; right: 15px; margin-top: -10px;}


/** screens with animated graph **/
.ra {font-size: 80px;}
.rb {font-size: 40px;}


/** screen get certificat **/
.screen[data-screen="get-certificat"] {}

.screen[data-screen="get-certificat"] ::-webkit-input-placeholder {color: #7a7876;}
.screen[data-screen="get-certificat"] :-moz-placeholder {color: #7a7876;}
.screen[data-screen="get-certificat"] ::-moz-placeholder {color: #7a7876;}
.screen[data-screen="get-certificat"] :-ms-input-placeholder {color:#7a7876;}

.screen[data-screen="get-certificat"] .screen-inner {padding-top: 10px;}
.screen[data-screen="get-certificat"] .s {margin-left: 202px; margin-right: 202px; margin-top: 45px; position: relative;}
.screen[data-screen="get-certificat"] .sa {background-color: white; text-align: center; padding: 20px 0;}
.screen[data-screen="get-certificat"] .sab {display: block; text-align: center; background-color: #ffa600; font-family: "Open Sans", Helvetica, Arial, sans-serif; font-size: 16px; padding: 7px 0;}
.screen[data-screen="get-certificat"] .saba {position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 100%; text-align: center; color: white; font-size: 36px; background-color: #ffa600; background-color: rgba(255,166,0,.95); visibility: hidden; opacity: 0; -moz-transition:150ms ease-in opacity; -webkit-transition:150ms ease-in opacity; -ms-transition:150ms ease-in opacity; transition:150ms ease-in opacity;}
.screen[data-screen="get-certificat"] .s:hover .saba {opacity: 1; visibility: visible;}
.screen[data-screen="get-certificat"] .sb {margin: 45px 0; font-size:24px; line-height: 1.35}
.screen[data-screen="get-certificat"] .sb .orange {font:inherit; color: #f3a31d;}
.screen[data-screen="get-certificat"] .se {display: none;}
.screen[data-screen="get-certificat"] .se .sf {margin-bottom: 35px; font-size: 24px;}
.screen[data-screen="get-certificat"] .se .x {padding: 20px 25px;}
.screen[data-screen="get-certificat"] .sd {position: relative;}
.screen[data-screen="get-certificat"] .sd input {background-color: #b8b5b1; background-color: rgba(255,255,255,.4); height: 45px; width: 277px; vertical-align: top; text-align: center; color:#7a7876; font-style: italic; margin-right: 10px;}
.screen[data-screen="get-certificat"] .sd input:focus {box-shadow: 0 1px 2px rgba(0,0,0,.4);}
.screen[data-screen="get-certificat"] .sd input:invalid {box-shadow: none;}
.screen[data-screen="get-certificat"] .sd .x {padding: 11px 40px 12px 25px; font-size: 18px;}
.screen[data-screen="get-certificat"] .sd .x:after {top: 50%; right: 15px; margin-top: -10px;}

.screen[data-screen="get-certificat"] .sdx {display: none; margin-top:15px;}

.screen[data-screen="get-certificat"] .sdfc.x {height: 45px; padding: 0; font-size: 0; background-color: white; width: 110px; cursor: default; position: absolute}
.screen[data-screen="get-certificat"] .sdfc.x .ajax-loader {display: inline-block; width: 32px; height: 32px; background: url('../../../gfx/images/ajax-loader.gif'); vertical-align: middle;}

Do I really ignore practises?

Nice question I ask myself here.

The answer: NO.

The code above does not conform to any practise out there (probably).

But it does one thing really well.

It is consistent and based on rules.

  1. the first element in the tree will have a class
  2. an element inside an element will have a class consisting of the parent’s class and the very next letter
  3. “componential” components, like for example a button will be marked by letters from the end of the alphabet

And even though I pulled all of the above rules out of my a$(OPT+4), they still conform to the rules, of how practises should be made, i.e. made them up and adhere to them.