All geek questions in one place

What is the best way to style in css?

I read this (this is a post from css-tricks.com) and this (this is a comment on the post).

This is what my css looks like:

.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, for example:

 <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 will 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 class names in the order in which I wrote css to: Margin (first), Width (next), Height (after that), Background Color (after that).

This way, I do not rewrite the code, and if I need to add the css attribute, I can just add the appropriate class, I feel that I have much better control.

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

If this is not the case, please delve deeper into a better agreement so that I understand which agreement I use, and more importantly, why I use it.

0
source share
2 answers

Your code strikes at the core of what has divided HTML and CSS into the world of web development. If you intend to embed your style in HTML anyway, you can simply use the style="width:1000px" instead of class="w100px" to get the same effect or revert to a good HTML ost style HTML style HTML 3.2 with <font> and <color> tags. We did not tear off these tags for no reason in the 21st century, because we now have separate CSS files.

The thing is to assign classes and identifiers using semantic values , describing the content , not the presentation . HTML should be fully machine-readable, without any assumptions about rendering media, and not in a “screen”. Your HTML should be 100% understandable and obvious to a Braille reader, screen reader, search engine, without any separate link .

So, instead of:

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

You should use:

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

As you can see, HTML is now completely devoid of how you want it to look, it just contains the content that you present. And then you put it with:

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

You should definitely read some tutorials about the Semantic Web , although forgetting almost everything you've learned so far - sorry.

+4
source

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

About naming, it is usually best to have more descriptive class names. Usually I use the "page name", let's say I do something for the registration page .register-save-button . So basically the pattern is `. {Page} - {what} - {it} - {is}

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

Your css also doesn’t look very good and does not seem to be effective; nothing will allow it to use any new member of the team.

If you do not want to repeat yourself in colors and that you should not look in the style of LESS .

0
source

Source: https://habr.com/ru/post/947199/

More articles:


All Articles