

Ask HN: Your coolest, most useful web design/dev tip? - Skywing

I've found that web design, and back end development, is surrounded by an amazing community of people. With so many people doing neat things it's no wonder that so many nifty tips and tricks come about. Many of these tips or tricks become part of many people's bag-o-tricks - their "go to" way of achieving neat effects, or awesome typography, or just anything that makes web development that much more appealing. Often times it could be a certain font that you use at a certain size, and it just looks amazing you think. Or, some CSS trick that you feel gives your pages that current, trendy look. Even could be some Photoshop trick that you like to do with images for your sites. Anything. Most people have a few.<p>So, I thought it'd be fun to share yours. If you had to pick one or two items from your arsenal of tips/tricks, which would they be?
======
wdewind
One simple way to figure out the correct way to create a CSS hierarchy is to
avoid using physical descriptions entirely in your tags, and focus on
"content" descriptions. Your classes should not ever be called "green",
"absolute", "underlined", "float-right" etc. They should be called "main-
menu", "primary-container" etc. This carries over into using javascript to
control the look of the page: your styles that will be swapped should be
called the state of the object, not the physical change (ie: call it "active"
not "enlarged").

This may seem trivial/obvious, but if you are working on a large site, or a
front end intensive site, it's pretty important and there is a lot of this,
even in otherwise clean codebases. If you create lots of subclasses (like
"absolute", "red" etc.) you tend to couple the styling of the page with the
content in a really messy way (if you go to update the styles of this page you
will have to do a lot of html editing as well, which defeats the purpose of
external CSS).

------
komlenic
Sensible includes/templating with PHP or whatever stack you're building on.
This is so useful when done well, but I don't know how many times I've seen
otherwise intelligent people sitting there copying the same markup/code into
every file or banging their head off the wall when Dreamweaver or some other
bloated suite tries to update a "template" on 4500 files and upload them to
production.

The idea is simple: anything that you're going to put in more than a couple
places/files, should be pulled out and put in a separate included file. Your
doctype declaration? Your nav bar? Your generic site-wide footer? Put all
these kinds of things in includes, update 1 file later and your changes take
place everywhere.

------
unconed
It's simple and obvious, but few people actually do it: read the CSS spec.
Learn the rules for specificity, for vertical margin collapsing, for
positioning and stacking, for forward-compatibility.

I know way too many front-end devs/designers who only learned from shitty
second hand tutorials, and it always shows.

------
robotys
1: Use framework: jQuery (for animated effects/AJAX), CodeIgniter for backend.
Or mootools/scriptaculous if you inclined so.

2: Learn to use CSS selectors effectively. It changed my world in a day
literally. Easy to digest source: [http://net.tutsplus.com/tutorials/html-css-
techniques/the-30...](http://net.tutsplus.com/tutorials/html-css-
techniques/the-30-css-selectors-you-must-memorize/)

3: Only use fancy fonts for headings, never body copy.

4: If stuck on design, browse famous Web Design Gallery or CSS gallery for
blog and current trend design. For corporate or more convensional, i like to
pick inpirations from templatemonster.com

5: For backend, best to learn from basic. Type the tutorial codes one by one
and understand how it works. If short on time, just focus on CRUD operation.
When got more time, learn how to optimize it for speed and maintainability.
After that, pick any frameworks that is popular and promising. It will help
shortern your development time tremendously. :)

------
jefflinwood
My #1 tip is to use a CSS grid system such as 960.gs - <http://960.gs/> or
Blueprint CSS - <http://www.blueprintcss.org/>

You'll solve so many headaches with layout, at the cost of having ugly CSS
class names.

~~~
wdewind
This goes pretty much 100% against my tip. Absolutely DO use a grid system for
your design, please DONT'T use a CSS grid framework.

Here's why:

Let's say you have a class "column-760" for a 760px wide column. Now let's say
you want to re-design the page. Not only do you have to write new styles, you
have to go in and remove all the places you've written "column-760" in the
actual markup. This entirely defeats the purpose of external CSS, and
incorrectly couples style with content. I can't tell you how frustrating it is
to work on a page that says something like:

<div class="column column-760 relative green-background"></div>

DO use content descriptive class names, DON'T use physically descriptive class
names.

~~~
jefflinwood
Why not use semantic class names with the grid system? That's what a tool like
Compass (<http://compass-style.org/>) will do for you.

Also, if you're using a template or theme, many of the changes you'd need to
make if you were changing the layout would only be made in one place.

~~~
wdewind
To be honest I hear you, if you use semantic class names tied to a grid, and
keep the class layering to a minimum it's totally fine. But I've just never
found a use for CSS frameworks, SASS etc. (and I work on a relatively large
public site). CSS has just never been the bottleneck for me, and the few times
I've wanted to use variables and other complications have usually been for
"clever" hacks, nothing production quality IMO.

As for your second point, it really depends on the coupling. If you are using
a grid system, like I was talking about, it's pretty rare that you would ever
want to restyle EVERY single 760px wide div (which just leads to more class
layering and more of a headache).

------
mozami
Use feature detection rather than browser/UA sniffing. Tools such as
<http://www.modernizr.com> and <http://www.headjs.com> (limited feature
detection but also provides other features) can be very helpful.

------
johnhok
Learn to use Firebug (<http://getfirebug.com>).

It is one of my most indispensable tools in debugging HTML, CSS, and
JavaScript. It's also one of the only remaining reasons I still use Firefox
for web development. The tool is simply a life saver if you learn it like the
back of your hand.

------
some1else
Use SASS, you can define functions and keep your stylesheet modular.

------
blago
zoom:1;

------
magee
visit HN every freakin day!

