Skip to content

Instantly share code, notes, and snippets.

@luk-
Created October 10, 2012 22:03
Show Gist options
  • Save luk-/3868770 to your computer and use it in GitHub Desktop.
Save luk-/3868770 to your computer and use it in GitHub Desktop.
my favorite reset
/* --------------------------------------------------------------
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; }
@isaacs
Copy link

isaacs commented Oct 11, 2012

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment