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. 


Log in to reply
 

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