What is the best way to style in css?

StackOverflow https://stackoverflow.com/questions/16776258

  •  30-05-2022
  •  | 
  •  

Question

I read through this (this is a post from css-tricks.com), and this (this one is a comment to a post).

This is how my css looks:

.m0 { margin : 0%;          }   //m0 = Margin 0% <br>
.mla { margin-left  : auto; }   //mla = Margin Left Auto <br>
.mra { margin-right : auto; }   //mra = Margin Right Auto

.w100px { width : 1000px; }   //w1000px = Width 1000px

.h100 { height : 100%; }   //h100 = Height 100%

etc..

I use my css only with classes, like this: 

<html class="h100">   <!-- Height 100% -->,

<body class="m0 h100">   <!-- Margin 0%, Height 100% -->, 

<div class="mla mra w1000px">   <!-- Margin-Left Auto, Margin-Right Auto, Width 1000px-->

etc...

If I want to create a red page using only the body my classes would look like this:

CSS

.m0 { margin : 0%; }

.bc08070 { background-color : hsl(0, 80%, 70%); }
//bgi = Background Color (hsl) 0 80% 70%

HTML

<body class="m0 bc08070"> <!-- Margin 0%, Background Color (hsl) 0 80% 70% -->

I write the class names in the order I wrote the css in: Margin (first), Width (next), Height (after that), Background Color (after that).

This way I don't rewrite any code and if I need to add a css attribute I can just add the appropriate class, I feel I have much better control this way.

Is this the best convention in css in terms of efficiency?

If it's not, please go into great depth on the best convention so that I understand what convention I'm using, and more importantly, why I'm using it.

Was it helpful?

Solution

Your code defeats the entire point of what the separation of HTML and CSS has done for the web development world. If you are going to embed your styling in the HTML anyway, you could just use style="width:1000px" attributes instead of class="w100px" for the exact same effect, or go back to good ole 1999-style HTML 3.2 with <font> and <color> tags. We didn't ditch those tags without reason in the 21st century, because that's why we have separate CSS files nowadays.

The whole point is to assign classes and IDs by their semantic meaning, describing the content, not the presentation. The HTML should be completely machine readable, without any assumption about rendering media, specifically not a 'screen'. Your HTML should be 100% clear and obvious to a braille reader, a screen reader, a search engine, without any single reference to layout.

So instead of:

<div class="w100px m10px">
  My content
</div>

You should use:

<article class="main">
  My content
</article>

As you can see the HTML is now completely devoid of how you want it to look, it just contains the content you're presenting. And then you style it with:

article.main {
  width:1000px;
  margin:10px;
}

You should definitely go read some tutorials about the Semantic Web though, and forget nearly everything you've learned so far - sorry to say that.

OTHER TIPS

I only use generic/reusable classes for stuff like wrappers, page columns and basic stuff like inputs, buttons, links.

About naming convention is often better to have more descriptive class names. I usually use the "page name", let's say I'm doing something for a registration page .register-save-button. So basically the pattern is `.{page}-{what}-{it}-{is}

The thing with naming is also that if you want to have a carrier and work for a company, as a professional or in a team, your naming convention is not gone work for other developers to understand. I always try to write html/css/javascripts/code with a "team mind state".

Your css also does not look good and does not seem effective, its nothing would allow any new team member to use.

If you don't want to repeat yourself on colors and what not you should look into LESS styling.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top