Monstrous CSS



  • Seen on Monster.com. cssWidth240, cssWidth270 and cssWidth280 are my favourites.

    /* BEGIN cssPropertyValue classes */
    .cssFloatLeft
    {
        float: left;
    }
    .cssFloatRight
    {
        float: right;
    }
    .cssClearBoth
    {
        clear: both;
    }
    .cssDisplayNone
    {
        display: none;
    }
    .cssDisplayBlock
    {
        display: block;
    }
    .cssPositionAbsolute
    {
        position: absolute;
    }
    .cssPositionRelative
    {
        position: relative;
    }
    .cssTextAlignLeft
    {
        text-align: left;
    }
    .cssTextAlignRight
    {
        text-align: right;
    }
    .cssTextAlignCenter
    {
        text-align: center;
    }
    /* margin */
    .cssMarginTop5
    {
        margin-top: 5px;
    }
    .cssMarginTop10
    {
        margin-top: 10px;
    }
    .cssMarginTop15
    {
        margin-top: 15px;
    }
    .cssMarginTop20
    {
        margin-top: 20px;
    }
    .cssMarginTop35
    {
        margin-top: 35px;
    }
    .cssMarginRight5
    {
        margin-right: 5px;
    }
    .cssMarginRight6
    {
        margin-right: 6px;
    }
    .cssMarginRight7
    {
        margin-right: 7px;
    }
    .cssMarginRight10
    {
        margin-right: 10px;
    }
    .cssMarginBottom20
    {
        margin-bottom: 20px;
    }
    .cssMarginLeft3
    {
        margin-left: 3px;
    }
    .cssMarginLeft5
    {
        margin-left: 5px;
    }
    .cssMarginLeft7
    {
        margin-left: 7px;
    }
    .cssMarginLeft10
    {
        margin-left: 10px;
    }
    .cssMarginLeft14
    {
        margin-left: 14px;
    }
    /* padding */
    .cssPaddingTop5
    {
        padding-top: 5px;
    }
    .cssPaddingTop6
    {
        padding-top: 6px;
    }
    .cssPaddingTop7
    {
        padding-top: 7px;
    }
    .cssPaddingTop25
    {
        padding-top: 25px;
    }
    .cssPaddingBottom5
    {
        padding-bottom: 5px;
    }
    .cssPaddingBottom12
    {
        padding-bottom: 12px;
    }
    .cssPaddingLeft5
    {
        padding-left: 5px;
    }
    .cssPaddingRight5
    {
        padding-right: 5px;
    }
    .cssVerticalAlignTop {
        vertical-align: top;
    }
    .cssVerticalAlignMiddle
    {
        vertical-align: middle;
    }
    .cssBoldText
    {
        font-weight: bold;
    }
    /** BEGIN the class names bellow refer to the searchbox input fields content-box width. TODO: get rid of it **/
    .cssWidth240
    {
        width: 225px;
    }
    .cssWidth270
    {
        width: 257px;
    }
    .cssWidth280
    {
        width: 263px;
    }
    /** END the class names bellow refer to the searchbox input fields content-box width. TODO: get rid of it **/
    .cssWidth250
    {
        width: 250px;
    }
    .cssWidth275
    {
        width: 275px;
    }
    .cssLineHeight17
    {
        line-height: 17px;
    }
    /* END cssPropertyValue classes */
    


  • You might as well use the style attribute instead then.



  • @henke37 said:

    You might as well use the style attribute instead then.
     

    And what happens when They change the spelling of one of those "magic" attributes? THIS css only requires one change to fix that. Have fun upgrading your non-future proof "style" codez.



  • But that is what search and replace is for.



  • @Daniel15 said:


    /** BEGIN the class names bellow

    They certainly do.



  • Ooh, nice, they even left out the colons in position: relative and position: absolute... I wonder if that renders those ones useless?



  • Also I saw this a bit further down the page:

    /*
     ______   _______           _______  _______  _______ 
    (  ___ \ (  ____ \|\     /|(  ___  )(  ____ )(  ____ \
    | (   ) )| (    \/| )   ( || (   ) || (    )|| (    \/
    | (__/ / | (__    | | _ | || (___) || (____)|| (__    
    |  __ (  |  __)   | |( )| ||  ___  ||     __)|  __)   
    | (  \ \ | (      | || || || (   ) || (\ (   | (      
    | )___) )| (____/\| () () || )   ( || ) \ \__| (____/\
    |/ \___/ (_______/(_______)|/     \||/   \__/(_______/
    Before change check your change is aligned with latest SG -
    //depot/Documents/UXGlobal/LIBRARY/B - Web/3 - Controls/Fonts/
     _  _  _ 
    ( )( )( )
    | || || |
    | || || |
    | || || |
    (_)(_)(_)
     _  _  _ 
    (_)(_)(_)        
    */
    

    @ekolis said:

    Ooh, nice, they even left out the colons in position relative and position absolute... I wonder if that renders those ones useless?

    Haha wow, I didn't see that!



  • Oddly enough, the colons got removed in my post as well... I swear I put them in!



  • @ekolis said:

    Oddly enough, the colons got removed in my post as well... I swear I put them in!
     

    Just when we thought we knew all the bugs in Community Server...



  • @Daniel15 said:

    TODO: get rid of it

    I love that



  • All non-trivial CSS stylesheets become monstrous after change orders start being implemented.

     



  • It's called a CSS framework, and it's a workaround to stuff like

    #someElement {
        border-radius: 1em;
        -moz-border-radius: 1em;
        -webkit-border-radius: 1em;
        -o-border-radius: 1em;
        -khtml-border-radius: 1em;
        -ms-border-radius: 1em;
    }


  • @MiffTheFox said:

    It's called a CSS framework, and it's a workaround to stuff like
     

    It's called Not Getting It, and you'll have to explain how exactly this works around vendor-specific properties.



  •  Oh, and CSS really isn't complex enough to warrant a "framework".

    I have devised a common.css that I include in each project and update now and then based on new insights. It's similar to reset.css, except it's based on practical usage instead of the common bullshit anti-wisdom known as "ZERO ALL THE THINGS BECAUSE I AM BETTER THAN THE DEFAULTS".



  • @dhromed said:

    the common bullshit anti-wisdom known as "ZERO ALL THE THINGS BECAUSE I AM BETTER THAN THE DEFAULTS".

    The defaults aren't nuked because they're inferior, they're nuked so that everything starts out in the same ground-zero crater across all browsers.
    The defaults being non-standard and implementation- and platform-specific and all that.



  • @dhromed said:

    I have devised a common.css that I include in each project and update now and then based on new insights. It's similar to reset.css, except it's based on practical usage instead of the common bullshit anti-wisdom known as "ZERO ALL THE THINGS BECAUSE I AM BETTER THAN THE DEFAULTS".


    You mean, you do with reset.css precisely what Eric Meyer recommends? Are we supposed to be impressed?



  • It's called a CSS framework, and it's a workaround to stuff like

    How is this a framework? How is having <div class="cssFloatLeft cssPositionAbsolute cssMarginTop10 cssPaddingBottom12 cssWidth280"> better than actually using CSS properly?

    I have devised a common.css that I include in each project and update now and then based on new insights. It's similar to reset.css, except it's based on practical usage instead of the common bullshit anti-wisdom known as "ZERO ALL THE THINGS BECAUSE I AM BETTER THAN THE DEFAULTS".
    Sounds like Normalize.css, which is what the HTML5 Boilerplate uses. Source is on Github.


  • @Xyro said:

    The defaults aren't nuked because they're inferior, they're nuked so that everything starts out in the same ground-zero crater across all browsers.
     

    Except that this is mostly nonsense.



  • @pjt33 said:

    You mean, you do with reset.css precisely what Eric Meyer recommends? Are we supposed to be impressed?
     

    I don't know what Eric Meyer recommends, has recommended or will recommend, nor do I care, because he's a person, not a prophet. In any case the reset-to-zero wisdom has apparently more popular traction than Eric's advice, which I don't even know, so yeah, you should be impressed. Or at the very least pleased that another guy is doing it right and thus there is hope yet.



  • @dhromed said:

    I don't know what Eric Meyer recommends, has recommended or will recommend, nor do I care, because he's a person, not a prophet.

    Sure, he's not a prophet, but he is the person who popularised reset.css. 



  • @dhromed said:

    I
    don't know what Eric Meyer recommends, has recommended or will
    recommend, nor do I care, because he's a person, not a prophet. In any
    case the reset-to-zero wisdom has apparently more popular traction than
    Eric's advice, which I don't even know, so yeah, you should be
    impressed. Or at the very least pleased that another guy is doing it
    right and thus there is hope yet.

     If you don't know who Eric Meyer is, or what it does, I don't think you're qualified to talk about best practices with CSS.

    About the original topic, it looks like Object Oriented CSS done wrong. With OOCSS you generally have base classes, and extend them whenever you need to have variations of those classes. Say for example that your header is always green but you want it red in one page, you would do something like:

     

    .header

    {

    font: Verdana 1em;

    color: #333;

    padding: 10px 0px;

    background-color: green;

    }

    .redheader

    {

    background-color: red;

    }

    <header class="header">...</header>

    <header class="header redheader">...</header>

     

    With this example we are getting to the same mistakes people make with OOP in other languages, like making everything an abstraction, or factories for everyone, in this case everything is an extension of everything.

     



  • @dhromed said:

    @Xyro said:
    The defaults aren't nuked because they're inferior, they're nuked so that everything starts out in the same ground-zero crater across all browsers.
    Except that this is mostly nonsense.

    I would love to make a plain old website with <h1> and <h2> tags and <ul> lists that look the same across all browsers. This cannot be done because the font sizes and margins are not quite the same. The best solution is mini nukes.



  • @BaRRaKID said:

    .redheader

    {

    background-color: red;

    }

    What are you going to do if you don't want it red any more? Change the markup or change the style sheet?



  • @fatbull said:

    @BaRRaKID said:

    .redheader

    {

    background-color: red;

    }

    What are you going to do if you don't want it red any more? Change the markup or change the style sheet?

    Isn't that what the Color menu on your monitor is for?



  • @boomzilla said:

    @fatbull said:
    @BaRRaKID said:

    .redheader

    {

    background-color: red;

    }

    What are you going to do if you don't want it red any more? Change the markup or change the style sheet?

    Isn't that what the Color menu on your monitor is for?

    ...or the fancy colored glasses?



  • @serguey123 said:

    @boomzilla said:

    @fatbull said:
    @BaRRaKID said:

    .redheader

    {

    background-color: red;

    }

    What are you going to do if you don't want it red any more? Change the markup or change the style sheet?

    Isn't that what the Color menu on your monitor is for?

    ...or the fancy colored glasses?

    Ingenuity! A fine Paraguayan trait.



  • @Daniel15 said:

    It's called a CSS framework, and it's a workaround to stuff like

    How is this a framework? How is having <div class="cssFloatLeft cssPositionAbsolute cssMarginTop10 cssPaddingBottom12 cssWidth280"> better than actually using CSS properly?

    Because of people insisting that CSS needs a jQuery- never mind that CSS has no way to actually implement something like that without a major WTF like this one.

    Basically they're assuming that browsers wanting to change how "float: left" works is more important then "wanting to change what that thing floating to the left looks like.



  • @fatbull said:

    @BaRRaKID said:

    .redheader

    {

    background-color: red;

    }

    What are you going to do if you don't want it red any more? Change the markup or change the style sheet?

     

     

    I believe you would change the style sheet (since the bg color is just a property of the "object") but I'm not a big fan of this "paradigm" (their words, not mine) so I'm no 100% sure, but it makes sense. Off course you would never name your class "red", it was just to make the example easier to understand. 

    The paradigm does have its merits tough, since it encourages code re-use, but that's something you can achieve without going "full OOCSS" (which sounds like something that could kill you)

     



  • @BaRRaKID said:

    The paradigm does have its merits tough, since it encourages code re-use, but that's something you can achieve without going "full OOCSS" (which sounds like something that could kill you)


    SASS hasn't killed me yet.



  • @BaRRaKID said:

    If you don't know who Eric Meyer is, or what it does
     

    Where did you get the idea that I don't know who he is?@BaRRaKID said:

    I don't think you're qualified to talk about best practices with CSS.

    hehehehe

     

     

    hehe

     



  • @pjt33 said:

    Sure, he's not a prophet, but he is the person who popularised reset.css. 
     

    If his idea of reset.css is "set everything to 0" then I think he's wrong on that particular aspect of successfully authoring maintainable, cross-browser CSS.

    I say "that particular aspect" because I don't want to sleight his entire kind-hearted person over a little thing like this.



  • @BaRRaKID said:

    I believe you would change the style sheet (since the bg color is just a property of the "object") but I'm not a big fan of this "paradigm" (their words, not mine) so I'm no 100% sure, but it makes sense.
     

    It makes sense, yes. The problem with this particular sheet is that the classname contains visual information.I basically do the same thing with the standard messages that our CMS displays. There's a standard message class with a default look, and the "extension" classes user_message and error_message, which are styled appropriately. The total default look goes into my version of reset.css, and site- or project-specific css can override these classes to account for their unique visual look.

    And that's how you do it, as I see it.



  • @dhromed said:

    @BaRRaKID said:

    I believe you would change the style sheet (since the bg color is just a property of the "object") but I'm not a big fan of this "paradigm" (their words, not mine) so I'm no 100% sure, but it makes sense.
     

    It makes sense, yes. The problem with this particular sheet is that the classname contains visual information.I basically do the same thing with the standard messages that our CMS displays. There's a standard message class with a default look, and the "extension" classes user_message and error_message, which are styled appropriately. The total default look goes into my version of reset.css, and site- or project-specific css can override these classes to account for their unique visual look.

    And that's how you do it, as I see it.

     

     

    Like i said in my previous post, the "red" in the class name was just to make the example more obvious. In reality you would name it something like alternateHeader, or whatever.

    And I misread your previous post about Eric Meyer, sorry about that one.

     


Log in to reply
 

Looks like your connection to What the Daily WTF? was lost, please wait while we try to reconnect.