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; }

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.