my favorite reset

reset.css

/* --------------------------------------------------------------

   reset.css
   * Resets default browser CSS.

-------------------------------------------------------------- */

html {
  margin:0;
  padding:0;
  border:0;
  font-family: 'Helvetica Neue', sans-serif;
}

body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, code,
del, dfn, em, img, q, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, dialog, figure, footer, header,
hgroup, nav, section {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

/* This helps to make newer HTML5 elements behave like DIVs in older browers */
article, aside, details, figcaption, figure, dialog,
footer, header, hgroup, menu, nav, section {
    display:block;
}

/* Line-height should always be unitless! */
body {
  line-height: 1.5;
  background: white;
}

/* Tables still need 'cellspacing="0"' in the markup. */
table {
  border-collapse: separate;
  border-spacing: 0;
}
/* float:none prevents the span-x classes from breaking table-cell display */
caption, th, td {
  text-align: left;
  font-weight: normal;
  float:none !important;
}
table, th, td {
  vertical-align: middle;
}

/* Remove possible quote marks (") from <q>, <blockquote>. */
blockquote:before, blockquote:after, q:before, q:after { content: ''; }
blockquote, q { quotes: "" ""; }

/* Remove annoying border on linked images. */
a img { border: none; }

/* Remember to define your own focus styles! */
:focus { outline: 0; }

This:

:focus { outline: 0; }

Consider removing that. I am going to rant about this a little bit. I like you, and I think you're a smart and reasonable developer. But I need to flip out about this a little bit, because it's very common, and it does a lot more harm to the user experience than you'd think.

As a person who uses the keyboard a lot, to interact with almost every website I interact with, this is incredibly distracting. There is no way to create the browser-default focus styles in a consistent way.

There are two differences between "using the browser default focus" and "remembering to define your own focus styles":

1. No one fucking remembers to do this. No one. If you think you remember this, I'm willing to bet you've forgotten a few times. Forgetting once means making a site that I consider unusable.
2. Using the browser-default focus outline means that I just know what's focused, intuitively, without even noticing how I know it. Just like how you know there's a floor underneath your feet. You probably sort of see it, yeah, but mostly it's just a subconscious awareness, and you can act accordingly without having to think. When you create your own focus styles, you replace this subconscious awareness with a need to learn how to use your interface. And WHY?? Seriously, is a pink dotted line that crucial to your vision for the site?

When I say "unusable", I mean, "I will be so enraged at the jarring and bizarre focus styles (or the jarring and bizarre utter lack of them), that I will go to any length possible to never use your website". It's as jarring as if you'd done $('*').on('focus', function(){this.blur()}). That's how it feels. I click in the textarea, and then go "... Wait a second... why can't I type here?" and have to learn the internet again. I feel like the site is an enemy trying to prevent me from knowing wth is going on. I click the wrong button, check the wrong boxes, etc. In that situation, I sometimes go buy something from the nearest competitor out of spite, even if that competitor is objectively worse in every other way.

The thing that sucks is that, once you remove the focus outline, there's no way whatsoever to put it back properly. Even if you do get it right for OS X Safari, you'll get it wrong for non-webkit browsers, and piss off those people. It doesn't affect positioning or flow, so there's no need to do this. It's just kicking the user in the teeth for no reason or benefit.

There is absolutely no value in removing focus outline. Tell your friends.

Thanks.

These are some good points, but the default Webkit input:focus is pretty terrible looking in some cases as there is no way to implement a radius on the outline on the corners of an outline.

Unless you want things to look like shit in webkit, I don't think it's unreasonable to set outline: 0 on input[type=text]:focus and use a box-shadow instead (which will respect your input's border's corner radii). This, however, ends up adding an outline for Firefox and Opera which do not use an outline on input focus.

True, there are some cases where the default looks kinda crap, but I'd argue that even then, it's most likely better to use the default unless you seriously know what you're doing. There are some custom focus indicators that are not terrible. For example, I hadn't even noticed the one on the npmjs.org search field was custom, because it just kind of felt right. (When I saw your pull req, I tabbed through the links, and was shocked and offended, though. Thanks for that!)

I think the problem that a lot of sites encounter is that they use off-the-shelf normalizers (like this one, or the one that npmjs.org used), and most of them remove :focus indicators completely to great fail.

As another example, you could make the same argument that there's plenty of perfectly valid cases for :link { text-decoration: none; color: inherit; } in your css. But would you use that in every page, as a default starting point? Of course not.

If you have an text input with a border-radius, or some other case where it's better to use a custom focus indicator, then you can remove it from that element. Removing it from every element by default, however, is just bananas.