1. Custom "ORDER BY"
   It's easy to order by ASC or DESC, but what if we want a custom order returned? This is when the FIELD() function comes in handy.
   SQL copy to clipboard
   1. SELECT * FROM table_name ORDER BY FIELD(field_name, 'Small','Medium','Large');

   
   

   SELECT * FROM table_name ORDER BY FIELD(field_name, 'Small','Medium','Large');
   

   The disadvantage is that this will slow down your query. For maximum performance, store the field as an ENUM with the values defined in the correct order.

2. Retrieving values from multiple rows as a single comma-delimited field

   Scenario: We have multiple values spread out across rows a table, but need to retrieve them together in a single field without performing multiple queries. I'm doing this for my archive page--I want to retrieve a list of topic tags for each article, but I want to do it with the same query that selects all my articles. GROUP_CONCAT() is the answer for string concatenation.

   SQL copy to clipboard
   1. SELECT GROUP_CONCAT(wp_terms.slug) AS topic, p.post_date, p.post_title, p.post_count, p.post_name, p.comment_count
   2. FROM wp_posts p
   3. LEFT JOIN wp_term_relationships r ON (r.object_id = p.ID)
   4. LEFT JOIN wp_term_taxonomy t ON (r.term_taxonomy_id = t.term_id)
   5. LEFT JOIN wp_terms ON (wp_terms.term_id = t.term_id)
   6. WHERE t.count> 0 AND t.taxonomy = 'category' AND p.post_status = 'publish'
   7. GROUP BY p.ID
   8. ORDER BY post_date DESC

   
   

   SELECT GROUP_CONCAT(wp_terms.slug) AS topic, p.post_date, p.post_title, p.post_count, p.post_name, p.comment_count
   FROM wp_posts p
   LEFT JOIN wp_term_relationships r ON (r.object_id = p.ID)
   LEFT JOIN wp_term_taxonomy t ON (r.term_taxonomy_id = t.term_id)
   LEFT JOIN wp_terms ON (wp_terms.term_id = t.term_id)
   WHERE t.count> 0 AND t.taxonomy = 'category' AND p.post_status = 'publish'
   GROUP BY p.ID
   ORDER BY post_date DESC
   

   The "topic" column could then return values such as "php,mysql,css".

Here's a quick way to pick out that string:

$match = preg_match_all("/Department:(.*)/", strip_tags($body), $matches, PREG_SET_ORDER);
$deptName = trim($matches[0][1]);

.printContent { visibility:hidden; position:absolute; } /* print only content */

@media print {
     /* Page content */
     #page, #colContent { margin:0px; padding:0px; width:inherit; }
     #page { padding:0% 5%; } /* Firefox fix for margin cut-off */

     /* Hide these elements */
     #header, #colTopic, #colAbout, #navFooter, .noPrint
     { display:none; }

     .pageBreak { page-break-before:always; }
     .printContent { visibility:visible; position:relative; }
     h1 { color:#000; }
}

First, let's take a look at a design element that every website has: the navigation menu.

<ul class="navMain">
<li><a href="#" class="active">Home</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">FAQ</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact Us</a></li>
</ul>

And the ugly CSS:

ul.navMain {
    list-style: none;
    margin: 0;
    padding: 10px 5px;
    padding-top:5px;
    font-weight: bold;
    }

ul.navMain li {
    display: inline;
    padding: 0 8px
    }

ul.navMain a {
    text-decoration: none;
    padding: 0 0 3px;
    border-bottom: 4px solid #ffffff;
    color: #999999;
    }

ul.navMain a.active {
    border-color: #F60;
    color:#06F
    }

ul.navMain a:hover {
    border-color: #F60;
    color: #666666;
    }

There are several things that bug me about the above code:

1. Overuse of HTML tags (<ul><li>)
   The point of CSS is to use less HTML tags, not more. Why use unordered lists and then completely change the functionality of how they display when we can do without them? And what happens when we need to override how the core <ul> and <li> elements display (e.g.: How to Style Perfect HTML Lists) but didn't "reset" the list in our CSS? (Did you catch how ul.navMain li { ... } is missing margin: 0?) Less code is always better!
2. id selector vs class selector
   The id selector (id="idName") and class selector (class="className") have almost the exact same functionality. The general rule of thumb is that if your element/style only appears once on your page, use an id selector. Otherwise, use a class. Multiple classes may also be used within a single element (class="className1 className2 className3"), while id selectors cannot because they're designed to only be used once as a way to identify an unique element.
3. Ugly Formatting
   Welcome to the great debate of single-line vs multi-line! My god, look at all that hideous whitespace! Now, whitespace is great for learning, but we're not newbies anymore, right? If you don't understand the CSS you're writing (or copy-pasting) or it's rather convoluted, then I don't blame you for wanting to see every little property on the screen. But otherwise, single-line is great if you want to hack out CSS quickly.

   The advantage is that a shorter document is created: less scrolling is involved making it much easier to pick out elements. Quicker changes = more efficiency = time saved. And it's not like single-line CSS looks horribly messy--it's incredibly easy to know what's going on with a single glance. We can look at any random line in a CSS file and know exactly where we are within the document, and that's beauty.

   Does less vertical scrolling equal more horizontal scrolling? Not necessarily. When making updates, there are certain properties we're just not going to change, like display or float or even width. We put these at the very end of the line. color and font properties are nice to have up front (as clients love to play with these). We can also group similar attributes together, which we should be doing anyway, or use shorthand CSS (e.g., background:#000 url(../img/scan_lines.gif) repeat-y; margin:10px 20px; etc.). And with widescreen monitors becoming more prevalent, this leaves developers with more horizontal real estate that should be put to use.

   Now there are several arguments against that I can understand: you use/need a special third-party tool to help you write CSS; you have word-wrapped turned on; you like to validate your CSS and want an exact line; or you are working with single-line haters. Otherwise, it's not "personal preference" when there is an obvious benefit to writing CSS using single lines. It took me a couple years before I switched over, but once I did I've never looked back.

The above CSS, rewritten:

<div id="navMain">
    <a href="#" class="active">Home</a>
    <a href="#">Products</a>
    <a href="#">FAQ</a>
    <a href="#">About Us</a>
    <a href="#">Contact Us</a>
</div>

#navMain { font-weight:bold; padding:10px 5px; }
#navMain a { color:#999; padding-bottom:3px; margin-right:1em; border-bottom:4px solid #fff; text-decoration:none; float:left; display:block; }
#navMain a.active { border-color:#f60; color:#06f }
#navMain a:hover { color:#666; border-color:#f60;}

I'd rather look at 4 lines of CSS than 29 lines any day of the week.

• This is what I consider an ugly HTML list.
• Almost every website incorporates lists. We love to make lists because it chunks data into separate, easy-to-read pieces.
• There are several problems with the default style of HTML lists: they have bad spacing and browsers do not play nice with custom bullet images.
• Spacing Issues:
  1. There is no distinct spacing between list items, which is annoying when reading list items that contain multiple lines.
  2. The initial left indent. Do we really need all that white space in the left margin, breaking up the list from its parent text? No.
• Custom bullet images: Incorrect alignment across browsers.
• Let's fix this.

ul.niceList {
  margin-left:0em;
  padding-left:0.2em;
  margin-bottom:1em;
}
ul.niceList li {
  background:url(images/bullet.gif) 0em 0.5em no-repeat; /* change background em accordingly */
  padding-left: 0.8em;
  list-style: none;
}
.niceList ul li { background-image:url(images/bullet_child.gif); }

ol.niceList li, ul.niceList li { margin-bottom:0.5em; }

ol.niceList {
  margin-left:1.5em;
  padding-left:0px;
}
.niceList ol li {
  list-style:decimal;
  background-image:none;
  padding-left:0em;
}

Do not use list-style-image! This property is not cross-browser friendly and has alignment issues. Take a look below:

Firefox aligns the bullets too south, while IE7 aligns them too north, and neither is centered. WTF?!! The alternative is "background," which gives us more control and predictability.

If you just want to remove the left margin and add padding between list items instead using a customized bullet image, less code is needed:

ul, ol { margin-left:1.5em; padding-left:0px; }
li { margin-bottom:0.5em; }

Download Example & Source