Skip to content

Instantly share code, notes, and snippets.

@mykz
Last active August 29, 2015 14:22
Show Gist options
  • Save mykz/8bf309ee0e132009168c to your computer and use it in GitHub Desktop.
Save mykz/8bf309ee0e132009168c to your computer and use it in GitHub Desktop.

In chrome the user agent stylesheet is applying the following form element style

font: normal normal normal 11px/normal '.HelveticaNeueDeskInterface-Regular';

I've noticed in normalize they handle this by doing the following:

button,
input,
optgroup,
select,
textarea {
  color: inherit; /* 1 */
  font: inherit; /* 2 */
  margin: 0; /* 3 */
}

What I'm curious about is why this never made it into Forget normalize or resets; lay your own css foundationn post?

@jaydenseric
Copy link

If you have forms on your site then adding extra rules to bring them in line is absolutely necessary.

There are a few reasons why I left this part out...

  1. The article was intended as a starting point for every project. Many projects don't have forms; out of all the campaign sites I work on, around a third do? Some components such as optgroup and [type=reset] are rarely used, so it's pretty hard to decide what everyone might need.
  2. For many of the projects that have only one style of form it is more efficient to do the cross-browser fixes and styling together in one hit.
  3. The browsers you support mean some normalization rules are either unnecessary or really important.
  4. There are many different strategies for customizing form components. Personally, I prefer to style native select inputs (CodePen demo) but some people accept the tradeoffs and like to use plugins for greater customization.

I found I was procrastinating publishing the article agonising over what to include so I just pushed what I was sure of; intending to flesh it out in later updates. I have a few important additions (some relating to button) on the way now. Time permitting, I will add an additional section with recommended form styles :)

Feel free to get involved and add issues or pull requests about this stuff to Barebones.

The most important thing is for people to grasp is how this strategy is different from normalize and resets and why it is probably a good idea.

@mykz
Copy link
Author

mykz commented Jun 1, 2015

@jaydenseric Thanks for a great in depth reply!

I'll look out for the future posts. I was also thinking maybe you could include features into BaseBones so users could enable or disable the features they require in the SASS as variables defaults. If I have some free time I might add it myself and create a pull-request.

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