Geek Answers Handbook

Object Oriented CSS

I watched this presentation about object-oriented css , but I think that I either do not understand it correctly, or do not understand the benefits using OO CSS:

HTML example:

<div class="border-1 bg-2 color-1 font-1"> </div>

CSS example:

 /* borders */ .border-1 { border: 1px solid red; } /* backgrounds: */ .bg-2 { background: yellow; } /* other sections */

I see the advantage in that you can quickly change styles for several elements, for example, the ability to switch the color scheme will be very useful.

But in fact you are defining the style / appearance of the HTML, or at least part of it. Of course, this is better than using the style attribute, because you can still exchange styles for a set of groups.

The point is that you define style groups inside HTML, but I found out that you have to create “logical” groups inside HTML (for example, class="nav-item" / class="btn submit-btn" ), and CSS is completely applies style and determines which elements belong to each other from a "stylistic" point of view (for example, .nav-item, .submit-btn { background: red; } ).

Perhaps I did not completely understand this concept. However, I still don't know a good way to build my CSS.

+7
source share
4 answers

CSS is not object oriented. My suggestion is to forget what you read about “object-oriented CSS” and instead focus on the CSS issues you are trying to solve. If they want to make CSS easier to write, read, and maintain, or to get extra features (like CSS variables), I think Less or Sass will do a lot better for you.

Using CSS, like what is offered with "object-oriented CSS", leads only to terrible, not semantic and meaningless CSS, which in the end is not so easy to maintain as "normal" CSS. Both id and class must have semantic and meaningful names , so using a structure that allows you to write semantic CSS (which describes the intent instead of the presentation) is in my humble opinion much better.

+7
source

It’s more like a “name loss”, it’s a real method. The code you showed is often derogatoryly called " enterprise css ", there is no excuse for it.

Moreover, having multiple classes on elements really impairs performance.

I advise you to follow Mozilla's guidelines when creating your CSS, which works the same for other browsers. And make a dedicated .css file with hacks for IE6, 7 and 8.

+3
source

The idea is that you reuse the same CSS classes for many elements. This saves both when writing css, and when saving css. so instead of defining a button .create-button .cancel-button .create-and-new you will only have a .button that defines padding, size , background , color , line-height , font-size , font-family and font-weight . And some really small classes for different button styles, for example, to change color or font-size

The correct oocss project that I often use can be found here: https://github.com/stubbornella/oocss/wiki

but yes, you should take a look at less, it combines the simple reuse of the same css properties for multiple elements with the corresponding class names.

+3
source

"Object Oriented CSS" is actually just a design pattern for how to get the most out of your CSS and basically is the same approach. Jonathan Snooks calls SMACSS .

If you call it OOCSS or SMACSS, the key to this approach is to create common user interface elements such as navigation abstraction . Then these user interface elements can be extended with more specific functions, adding additional classes to the element and / or to the element of the container. Or, alternatively, you can add your own CSS rules using the element identifier or semantic classes.

Further reading:

+1
source

More articles:


All Articles