I LOVE CSS!!!!

[BlackCat]

I'm so happy right now. I feel as though a tremendous amount of weight has been lifted off my shoulders.

6 months ago, I absolutely stunk at web design. My coding was terrible and dangerous. This part of my character still manifests in my life and work, in my code. That said, what do you do when you have a million web pages containing inline/on-page styles displaying something you now want to urgently get rid of? Well, if all infected pages link to your styles.css file, simply add the same inline style div name to your external style sheet with this code:

Code: Select all

.divname
{
visibility:hidden;display:none !important;
}


The result? The "!important;" code will override all other CSS code. The inline CSS will therefore be inactive / useless / handicap / doesn't do anything now.

Of course junk code or dirty code still remains. However, mission accomplished, and lesson learned. CSS never ceases to amaze me. I'm learning all the time.

What are some other cool CSS tricks?

[Bullet Magnet]

Of course junk code or dirty code still remains.

The job is incomplete then.

You should refactor all junk/garbage/inline styles to your external stylesheet and then get rid of said junk completely.

[BlackCat]

Nope. The job is complete; I didn't want something to display and now it doesn't.

[Bullet Magnet]

The job is complete. The work is not yet done.

[BlackCat]

Don't get me wrong. I don't like junk code. However, when a million pages are affected, there is little I can do other than resort to the functions of !important;. Sure, I could take all of the HTML pages and use N++'s find and replace feature to propagate clean code across all pages. However, when we're talking junk code of such a large scale, in my opinion, it is unmanageable and would only be a waste of time to even attempt such a tremendous amount of work.

[Zorro]

[...]What are some other cool CSS tricks?

Use "overflow: hidden;" on any wrapper to clear child element floats. Saves having to do <div class="clear-fix"></div> type stuff.

Use shorthand margins and padding.

Code: Select all

#myElement {
     margin: 10px 15px 12px 5px;
}

Is equivalent to:

Code: Select all

#myElement {
     margin-top: 10px;
     margin-right: 15px;
     margin-bottom: 12px;
     margin-left: 5px;
}

If the top margin will be the same as the bottom margin and the right margin is the same as the left margin, you can do:

Code: Select all

#myElement {
    margin: 10px 5px;
}

Which is equivilent to:

Code: Select all

#myElement {
    margin-top: 10px;
    margin-right: 5px;
    margin-bottom: 10px;
    margin-left: 5px;
}

You can do this for padding and border-radius as well. The easiest way to remember the shorthand order is to think of a clock. Start at the top and go clockwise (top right bottom left).

[Zorro]

Use shorthand hexidecemal colors.

Code: Select all

#myElement {
    color: #f12;
}

Is equivalent to:

Code: Select all

#myElement {
    color: #ff1122;
}

Use the following if you want to "width: ##px" to include the width of borders and padding of the particular element.

Code: Select all

#myElement {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

Use an asterisk (*) to affect all child elements:

Code: Select all

* {
     color: #000; /* Affects every element on page */
}

#myElement * {
     font-size: 0.8em; /* Affects every element inside #myElement */
}

[Bullet Magnet]

I'm trying to adjust to using shorthand margins/padding. For a seasoned CSS developer, I'm sure they read as one in the same but nothing replaces explicit properties like "margin-top" for a beginner.

[Bullet Magnet]

Use "overflow: hidden;" on any wrapper to clear child element floats. Saves having to do <div class="clear-fix"></div> type stuff.

I see that specific line ALL of the time.

[Zorro]

I'm trying to adjust to using shorthand margins/padding. For a seasoned CSS developer, I'm sure they read as one in the same but nothing replaces explicit properties like "margin-top" for a beginner.

As stated earlier: "The easiest way to remember the shorthand order is to think of a clock. Start at the top and go clockwise (top right bottom left)."

Use "overflow: hidden;" on any wrapper to clear child element floats. Saves having to do <div class="clear-fix"></div> type stuff.

I see that specific line ALL of the time.

Yes, you see "overflow: hidden;" a lot, but most people don't know how to use it. It has specific design uses, such as hiding sub-elements that fall outside of their parent element's boundaries when absolute positioning or negative margins are used. But "overflow: hidden;" is most useful for clearing floats without the need for extra markup. For some reason a lot of seasoned web designers have real difficulty understanding the concept of floats, and have even more difficulty learning to actually use them. For those that do learn/know how to use them, they often use extra markup to clear them (i.e. <div class="clear"></div>), which most of the time is unnecessary and downright messy.