SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 30
  1. #1
    SitePoint Member
    Join Date
    Feb 2010
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Object oriented CSS uses, and learning as a newbie.

    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+

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,797
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    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.

  3. #3
    SitePoint Member
    Join Date
    Feb 2010
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  4. #4
    SitePoint Wizard Blake Tallos's Avatar
    Join Date
    Jun 2008
    Location
    Cuyahoga Falls, Ohio.
    Posts
    1,508
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code HTML4Strict:
    <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>

    Code CSS:
    example_1.Visible = true;
     
     
    example_2.Visible = true;
    You can do stuff like that with HTML & CSS, but HTML & CSS are not programming languages.
    Blake Tallos - Software Engineer for Sanctuary
    Software Studio, Inc. C# - Fanatic!
    http://www.sancsoft.com/


  5. #5
    SitePoint Wizard
    Join Date
    Dec 2003
    Location
    USA
    Posts
    2,582
    Mentioned
    29 Post(s)
    Tagged
    0 Thread(s)
    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.

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,797
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by mittin View Post
    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

  7. #7
    SitePoint Member
    Join Date
    Feb 2010
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  8. #8
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,603
    Mentioned
    24 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by mittin View Post
    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..
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  9. #9
    SitePoint Wizard
    Join Date
    Dec 2005
    Posts
    1,675
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    The more you learn.... the more you learn there is more to learn.

  10. #10
    Non-Member
    Join Date
    Jun 2010
    Location
    4727′35″N 2618′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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:
    Code:
      <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.

  11. #11
    SitePoint Wizard
    Join Date
    Dec 2003
    Location
    USA
    Posts
    2,582
    Mentioned
    29 Post(s)
    Tagged
    0 Thread(s)
    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.

  12. #12
    Non-Member
    Join Date
    Jun 2010
    Location
    4727′35″N 2618′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You're welcome samanime. You could say I'm wiser, but no thanks to some tech knowledge I might have learned from it

  13. #13
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,797
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by noonnope View Post

    In the last 5 minutes, when you'd expect an epiphany, the following code is given:
    Code:
      <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

  14. #14
    SitePoint Wizard siteguru's Avatar
    Join Date
    Oct 2002
    Location
    Scotland
    Posts
    3,609
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    So what's wrong with that code?
    Ian Anderson
    www.siteguru.co.uk

  15. #15
    Non-Member
    Join Date
    Jun 2010
    Location
    4727′35″N 2618′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I thought I explained it very clear:

    Quote Originally Posted by noonnope View Post
    In the last 5 minutes, when you'd expect an epiphany, the following code is given:
    Code:
      <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

  16. #16
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    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.

  17. #17
    Non-Member
    Join Date
    Jun 2010
    Location
    4727′35″N 2618′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by xhtmlcoder View Post
    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:
    - redundant declarations
    - multiple CSS stylesheet files
    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.

  18. #18
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    [...]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.

  19. #19
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    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.

  20. #20
    SitePoint Wizard siteguru's Avatar
    Join Date
    Oct 2002
    Location
    Scotland
    Posts
    3,609
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Maybe I should have used a baited-fish-hook smiley, 'cos I certainly got some bites.
    Ian Anderson
    www.siteguru.co.uk

  21. #21
    SitePoint Member
    Join Date
    Feb 2010
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Wwow I didnt expect such a reaction to her video. While watching it yesterday I thought this was the new way to code css, so thats why I thought I would ask here, seems you guys soundly reject her ideas. Whats interesting though reading posts from variuos web developers on blogs and reponse to her video, they seem to think its a preety good way to code, Oh well back to learning.

  22. #22
    Non-Member
    Join Date
    Jun 2010
    Location
    4727′35″N 2618′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by mittin View Post
    While watching it yesterday I thought this was the new way to code css, so thats why I thought I would ask here, seems you guys soundly reject her ideas. Whats interesting though reading posts from variuos web developers on blogs and reponse to her video, they seem to think its a preety good way to code
    "Tcha, you know what?! Uh-Uh!"

  23. #23
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    They were probably getting paid to say it was 'good advice' or just fluff posts. The type of fluff the Mentors usually REPORT and flag on a daily basis.

    OOCSS may be a interesting concept for some regarding 'reusability'. Though by the sounds of things this video was badly produced (and gave bad advice). If that code example in anything to go by... I don't even want to dare think about what the video was like. But from the posts above it sounded complete and utter drivel.

  24. #24
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,233
    Mentioned
    47 Post(s)
    Tagged
    1 Thread(s)
    The content model for div is flow, which mean either inline either block. And no, the validator doesn't catch that
    Of course it doesn't. Flow doesn't mean "must all be inline OR must all be block". It's not technically illegal to mix the two in a block container, so the validator *shouldn't* say anything about it (just as it doesn't complain about bad class names or divitis).

    It's just considered a general bad practice by some AND can cause the duplicate content bug (and some other bugs) in IE < 8.

    So I don't have access to video right now, but this is Nicole Sullivan? Yes, she's been pushing this "OOCSS" thing for a while, and there are some big names in the web development industry who really like the idea of LESS and SASS (mostly programmers who are also front-enders and would like to get some of the benefits of programming in a NON-programming language like CSS).

    She's in no way considered any kind of a hack in the industry, I know that.

    That said, I've always horribly disagreed with her Sass site and the whole idea of OOCSS. But, maybe that's because the way I write CSS would get little benefit from such a system.

    She has been a speaker at the Fronteer's Congress in the past I believe.

  25. #25
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,233
    Mentioned
    47 Post(s)
    Tagged
    1 Thread(s)
    I just saw, in the screenshot Noonope posted, Stoyan Stefanov's name as well as Nicole's. He's at least very knowledgeable about JS and browser loading/blocking. Another name I would not call a hack.

    But the type of garbage code they use with OOCSS... maybe that's what it's for, the garbage HTML the likes of Facebook and just about every CMS push out. In which case, I can see where/why it would make *ANY* CSS-ing dev's life easier.

    I'd so rather not have to work with bad bloated markup like that.

    This makes me say: Jason and samanime and Stomme and Robert are right. Mitică is (possibly ) wrong.
    Lawlz, but you never know.

    I say, we round up the spec writers, tie em to a chair under a flickering light bulb and grill them.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •