Object oriented CSS uses, and learning as a newbie

[mittin]

Hi there,

so after a long time, I am trying to get back to learning html/css. I came across a video regarding OOCSS, is anyone using this method? From the video she basiclly says dont use Id’s for styling, and a few other things I havnt got my head around. Is this basiclly a better way to learn css? The tuotirals I am going through and videos use all the methods she says not to use, infact by the videos and tutorials I have seen, people are just suing bad coding methods according to her presentation. So am I really learning css properly by using videos or even tutorials that are like 3+ years old. There is nothing really on Object orientated css coding I can find other than the womans presentations. This is the link to the video.

The Top 5 Mistakes of Massive CSS | Nettuts+

[PaulOB]

Hi,

I remember seeing that a while ago but I haven’t got time to watch it again today.

You may be better off asking specific questions about the way things are done and then see how others would approach it.

I believe the reason for avoiding ids was one of specificity so that you could create re-usable structures that would not be affected by global rules.

e.g. #main p {color:red} would overide an element that you dropped in the page that was styled as p.test{color:blue}

It makes sense in some cases where you will be having content added at a later date that may be affected by specificity but for things like navigation its unlikely to be an issue.

[mittin]

I guess my question wasnt really just about ID’s but regarding the whole method of learning css using this method. I am only just getting back to learning html/css, so how do I go about learning this method of html/css, in alot of the videos ii have they use methods that she labels as bad practice, such as multiple use of headers, id’;s for styling etc

[Blake_Tallos]

<div id="example_1" runat="server">
    <h1 runat="server">
    Simple Application
    </h1>
</div>

<div id="example_2" runat="server">
    <h2 runat="server">
    Simple Application
    </h1>
</div>

example_1.Visible = true;


example_2.Visible = true;

You can do stuff like that with HTML & CSS, but HTML & CSS are not programming languages.

[samanime]

It depends how you work.

The whole idea of not using ids would be to reuse code, as Paul said. That is a good idea, but it’s not required (and it’s not always useful).

For example, something like .red and .bold would be good because they’re nice and reusable. However, something like .page_header isn’t necessarily useful because your header is going to very greatly from site to site, and you may wind up spending more time trying to get it morphed.

I think a more useful method is a happy balance: giving unique things IDs to use for styling and classes for making reusable common components.

[PaulOB]

@mittin

I guess my question wasnt really just about ID’s but regarding the whole method of learning css using this method. I am only just getting back to learning html/css, so how do I go about learning this method of html/css, in alot of the videos ii have they use methods that she labels as bad practice, such as multiple use of headers, id’;s for styling etc

Well, it can be a minefield navigation your way through what’s good and what’s bad but and you just have to make decisions yourself based on what you read and see who’s saying/writing it. Opinions differ on all things but you can usually tell the wheat from the chaff.

For example in the video (IIRC) they mention that using grids are good and floats are bad! I’ve worked on grids and they just make everything about ten times harder than doing it without them. They are just another layer on top of css and when things go wrong they are virtually impossible to debug. The only useful thing about grids is that if a team works on something then they all stick to the same methods.

However some other people like grids a lot so you have to make your own mind up.

As with all things the more experience you gain the better you get at judging what’s right and what’s wrong as web development seems to suffer form having no “one right way” to do something but more of “best practice” approach. And of course no two people agree on the best approach.

A lot of CSS is pretty logical and you should keep things as simple and as lean and clean as possible all the way through. Use valid code and a structured approach and find out how things really work. Don’t use properties if you don’t understand why you are using them.

It can be a steep learning curve at first but it eventually flattens out

[mittin]

Hey thanks for the help all, much appreciated. I was watching the video and thinking if facebook consulted her about their site, she must be preety big in the web development industry.

Anyway I have set myself a goal of next year june 17th 2012, to have enough skill to work as a professional:).

[felgall]

@mittin

I was watching the video and thinking if facebook consulted her about their site, she must be preety big in the web development industry.

What makes you think that? She could just be a friend of the person whose job it was to find a consultant who claimed to know something about CSS. (Not saying that is the case just that because Facebook consulted her doesn’t imply that she is any more important within the industry than you are).

I also think Paul’s comments about grids is being overly generous regarding something that is just an aide used by those who do not know how to use CSS properly…

[computerbarry]

I also think Paul’s comments about grids is being overly generous regarding something that is just an aide used by those who do not know how to use CSS properly…
Thanks for clearing that up felgall, I always thought I was missing some sort of advanced CSS method but seems like a pre-built library of CSS decelerations with no guarantee that everything will be used. Never fancied the grid approach personally, I like to create CSS as i need it.

[system]

OK, watched it, and here are my thought on it.

1. She’s talking for almost 40 minutes and manage to say (nothing about how): we cut the code. By whatever means necessary. And parched everything in our path.

2. Forget about how CSS REALLY works: specificity, styling elements differently, according to the section their in and with the STYLE you want to apply. Stick to a pattern, for your own good.

3. Forget about normal semantic HTML. Stick to a “object” to make it more readable for the next web coder wannaby.

In the last 5 minutes, when you’d expect an epiphany, the following code is given:

  <div>
    <a href="#">
      <img src="img.png" />
    </a>
    
    <div>Some text</div>
  </div>

Really? I mean really?

The wrapping div contains inline + block. The content model for div is flow, which mean either inline either block. And no, the validator doesn’t catch that

No alt attribute for the image. What? facebook not accessible? On a second thought, why should it be accessible, it’s not like it’s targeting all kinds of users. After all, it’s only for teenagers showing their breasts… or their girlfriend’s breasts… or their ex-girlfriends breasts

Basically, she says this: facebook coders have done a lousy job since the beginning. There are also many many lousy web coders out there, that make facebook coding look a little better. Now, it’s was too late to make it right, but we can make it cheaper and profitable using clumsy CSS grids and made up OOCSS. And with complete disregard to our best practice! Against specifications. But with php in mind And green. This one I never understood: is she trying to be techy or environmental?

We can all understand that. But, I would like to invite Penn & Teller to tell us what this is! 'Cos it seems to me like I’ve just waisted a good 40 minutes of my life!

EDIT: It just struck me with the natural conclusion: if you are certain to be as famous as facebook, you may rank high in Google’s search results in spite of following all she says about code economy and savings. Google, and I, and you, we all know that the SEO law is only for little people Otherwise, you better learn how to properly code, damn it, or you’ll find your self unemployed even if going to 10 jobs interviews daily.

[samanime]

Thanks noonnope. If you hadn’t given us that review I would have also wasted my life. =p

For mittin, I think I’d take the opinion of the real experts around here over one self-proclaimed expert. I don’t think in all my years on Sitepoint I’ve ever seen one proponent of OOCSS.

Also, even if she is a consultant for Facebook… that’s not exactly a big deal (from a technical standpoint). There are quite a few major flaws in Facebook’s website, such as the 35 HTML validator errors just on the login page.

[system]

You’re welcome samanime. You could say I’m wiser, but no thanks to some tech knowledge I might have learned from it

[PaulOB]

@noonnope

In the last 5 minutes, when you’d expect an epiphany, the following code is given:

  <div>
    <a href="#">
      <img src="img.png" />
    </a>
    
    <div>Some text</div>
  </div>

Really? I mean really?

Aarghh! Why do they do that? Especially in a high profile demonstration.

The above is my pet hate and just makes me feel uncomfortable looking at it

[siteguru]

So what’s wrong with that code?
:stir:

[system]

I thought I explained it very clear:

@noonnope

In the last 5 minutes, when you’d expect an epiphany, the following code is given:

  <div>
    <a href="#">
      <img src="img.png" />
    </a>
    
    <div>Some text</div>
  </div>

Really? I mean really?

The wrapping div contains inline + block. The content model for div is flow, which mean either inline either block. And no, the validator doesn’t catch that

No alt attribute for the image. What? facebook not accessible? On a second thought, why should it be accessible, it’s not like it’s targeting all kinds of users. After all, it’s only for teenagers showing their breasts… or their girlfriend’s breasts… or their ex-girlfriends breasts

[xhtmlcoder]

They do such weird code because marketers can turn the population into complete zombies that will follow the latest fad or be amazed by namedrop or brand name or just blindly believe everything they see on video.

Like Stephen says just because Facebook consulted her doesn’t mean much. I have in the past been asked by people working for IBM/Lexmark to look at some of their intranet code to troubleshoot a few markup related issues. Though I don’t go name dropping.

Off Topic:

I’ll take Μitică’s film critique to mean it was a marketing video and not bother viewing it.

That code is INVALID at best and very sloppy using extra DIV for no sensible reason at all. Obviously I haven’t seen the video but that code sample is pretty weak and looks amateurish.

[system]

@xhtmlcoder

They do such weird code because marketers can turn the population into complete zombies that will follow the latest fad or be amazed by namedrop or brand name or just blindly believe everything they see on video.

Off Topic:

I’ll take Μitică’s film critique to mean it was a marketing video and not bother viewing it.

Exactly, Robert.

She said she was… consulted on how to cut the code down for profitability reasons: too much data being sent. She hides all that behind how CSS processing impedes display rendering speed, with some weak Opera examples (since Opera reveals the two steps she needed for demo).

She begins making false parallels, between the worst practices on the web (she actually lists the single most awful ones as being the most representative) and her… solutions.

Like (I’m making up the actual figures, didn’t care much for this dust in my eyes ):

• 65% don’t do gzip
• only 15% do minify
• worsts Alexa top 1000 offenders for:

[INDENT] - redundant declarations

• multiple CSS stylesheet files[/INDENT]
  etcetera.

She’s basically looking at the worst examples to make it look like facebook didn’t have such a bad code to begin with, and to find a way to justify:

• renounce (Yes, Renounce!, she keeps repeating that) what you think are best practices right now, and replace them with CSS Grids, OOCSS, HTML Objects (whatever these may be…).

• restrinct the use of CSS: use only classes, selectors for similar tags should have the same weight, don’t style the same tag differently just because you think the design look better that way, keep it “consistent” (as in choose an initial style and NEVER change it) across not only the page, but across the website, and a bunch of other CSS nonsense. Basically she says: make an extremelly simple CSS, with primitive selectors, so that the CSS work would be minimal for the browser.

• don’t bother with semantic HTML; resort to “objects” like the one in that SINGLE example provided. Basically she says: extremelly simple mark up, so other web devs, no matter their expertise, could easily follow and “improve” that code.

in order to cut code down by 19%. Well, the green maybe is asking for that, but this is only a solution, a very bad one. No self esteemed programmer would ever do that. It turns the whole standard programming in an INVALID proprietary format, destined to close down on you in the future like a grave.

And somehow, all this has to do with php also. It’s not clear though how and why.

[xhtmlcoder]

[…]don’t bother with semantic HTML; resort to “objects” like the one in that SINGLE example provided.

Off Topic:

Glad I didn’t have to waste my time watching that comedy then.

[system]

That had to be the dumbest video I’ve seen online and some of the worst development advice I’ve EVER heard. What little information is there (would have made a really good five minutes of idiocy instead of 40 minutes)

Because slapping classes on EVERYTHING makes code clearer and easier to maintain – NOT…

“You might have people who aren’t CSS experts working on your files, so you have to make it so they don’t have to learn…” – WOW. Yup, we’re done here.

Of course it’s funny her name is Nicole Sullivan because, shya, ya know what, uh-uh.

[siteguru]

Maybe I should have used a baited-fish-hook smiley, 'cos I certainly got some bites.