6 ms·

CSS Micro Reset

63 points by vladocar 8y ago

hit8run 8y ago
Wow an NPM package for 5 css rules. Reading the description this guy seems to be searching for normalize.css https://github.com/necolas/normalize.css/blob/master/normalize.css https://github.com/necolas/normalize.css/blob/master/normali...
- pornel 8y ago
  You're missing the point here. The author is not looking for normalize.css, but advises against such nuke-it-from-the-orbit approaches. It's just 5 rules, because you don't need more. And you can copy'n'paste them if you don't want to bother with npm.
  - yoz-y 8y ago
    The reset parent posted does better job of explaining what it does than this micro reset. Which is something the author advocates. I agree with him that you do not need to use rules that do not apply on elements you don't use. However, the multi cascade can be handled by a css preprocessor.
  - rootlocus 8y ago
    You mean the original author doesn't need more? I'm all for minimalism, but my minimalism doesn't necessary mean everyone's minimalism. And while the readme mentions you might not need it, or you might need to add to it, IMHO if it's not something that meaningfully solves the problem for a majority of users, and if it's trivially small then it probably isn't that useful.
    - fortyseven 8y ago
      So... guess you don't use it then, eh?
    - birdtime 8y ago
      It's not really useful, no. But it's interesting. I read the readme and the five lines of code as a blog post. It makes a couple good points. First, there's no need to reset elements that aren't being used. Second, a reset file is redundant by nature since it's overwriting a "reset" provided by the browser, that's subsequently overwritten by any custom styling. But yes, in virtually every scenario it's more practical to not think about it and use normalize.
  - dosy 8y ago
    Always appreciate a good Aliens reference. Especially when it's helping point out what the parent didn't understand about the approach. I think a minimal set of cross-browser CSS reset rules is a very interesting thing.
- lhorie 8y ago
  I got a completely different idea from reading the description. He's saying the whole point why this thing is small is that you don't need to keep stacking changes to the same properties, i.e. why do this: /*reset*/ h1 {margin: 0;} /*your pretty styles*/ h1 {margin: 0 0 10px;} He argues that you can just drop the first rule because you're going to be setting it to something else later anyways; you should only reset properties that are likely to be final and only tags you actually use.
  - masklinn 8y ago
    That seems like an argument to post-process the CSS and avoid double-setting properties. The point of a reset/normalise stylesheet is to create a coherent and consistent baseline for work, in theory you could actually stop there. Or just alter the reset itself.
  - Bluestrike2 8y ago
    Ideally, I don't disagree with the concept behind that approach. Clean, streamlined CSS is nice because it's generally easier to work with. Browser page inspectors help with that, though. You aren't searching up and down a file sheet to figure out what rules are applicable in a given context. Resets (normalize.css or any other) are about consistency. Both between browsers and between projects. When you import one, you know what you're getting and don't have to think about it outside some edge cases. This micro reset eliminates that and forces you to figure out your reset needs each and every time. Odds are, you'll miss something at some point. That's especially likely when it comes to accessibility; good resets try to take it into account to avoid screwing users who rely on screen readers and other assistive tech, for instance. They don't always manage it, but their shortcomings are at least consistent. That makes it easier to fix. Besides, there are already a lot of tools and options to accomplish the stated goals. You could wrap less commonly used reset rules in conditionals and set variables to disable certain ones (forms being the example given). Build tools have improved a lot in recent years. You can use things like cssnano[0] to help you optimize your stylesheets when they're built. On the other hand, how important is this anyhow? Browsers are highly optimized. Having tons of duplicate media queries throughout a stylesheet (common when dealing with preprocessors and media query mixins) doesn't impact performance, for instance.[1] No reset is going to have a measurable performance impact in adding a handful of duplicate selectors. As for file size, gzip is extraordinarily efficient when it comes to dealing with property and selector names. If you're implementing something like this for performance reasons, the time spent crafting the smallest possible reset for each site you work on would be better spent elsewhere. 0. http://cssnano.co/ http://cssnano.co/ 1. https://helloanselm.com/2014/web-performance-one-or-thousand-media-queries/ https://helloanselm.com/2014/web-performance-one-or-thousand...
thex10 8y ago
The contents: /* CSS Micro Reset */ body { margin: 0 } h1, h2, h3, h4, h5, h6 { font-weight:normal } table { border-collapse: collapse; border-spacing: 0 } th, td { text-align: left; vertical-align: top } img, iframe { border: 0 }
- danyim 8y ago
  What a joke. Where’s box-sizing: border-box, the most common reset of all? Is this another JS engineer seeking Github stars?
  - vladocar 8y ago
    I love your reference. I love it so much that I changed my github profile to: "Just another Full Stack Developer seeking the stars." :):)
- Reedx 8y ago
  Though maybe it's nice to have the options, that this is an NPM package and CDN link seems like a parody.
andrewmcwatters 8y ago
There's no such thing, to my knowledge, as a "browser reset"; there is a standardized normative default user-agent style sheet for HTML4 as specified in CSS level 2. I agree with everything else the author is saying, though. But there's no point in this existing when normalize.css does. Even then, you really shouldn't be using that in my opinion for the same reasons the author specifies.
- vladocar 8y ago
  Yes, I've used the word "browser reset" but is just "default browser style". Here is the webkit style: https://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css https://trac.webkit.org/browser/trunk/Source/WebCore/css/htm...
saudioger 8y ago
I agree with the gist of things here, but surprised this doesn't include * {box-sizing: border-box;}
- vladocar 8y ago
  That will force you to use completely different CSS layout model. Yes today is common practice the use of box-sizing: border-box and it should be the first line of code when you set your layout. I don't what to force anyone to use box-sizing: border-box.
  - actionscripted 8y ago
    > ...it should be the first line of code...I don't what to force anyone to use box-sizing: border-box. I'm not clear on what you're saying. It sounds like you're saying today it's absolutely something you should use but you don't want to force it?
    - vladocar 8y ago
      "It sounds like you're saying today it's absolutely something you should use but you don't want to force it?" Yes, correct. Let me explain.. that is the most important decision you make when you plan your CSS layout. But is your decision to make. You can absolutely add this in the reset. Feel free to add stuff in the reset.
  - saudioger 8y ago
    I suppose the argument against it is that you're not normalizing something across browsers... you're changing it? Right?
    - extra88 8y ago
      It sort of normalizes the box model in every browser to be like IE6.
brianzelip 8y ago
Thanks, this is just what it says it is. Particularly appreciate the insight into headings. `box-sizing` can be more nuanced than a wild card approach. On production stuff, I tend to use Tachyons’ module, http://tachyons.io/docs/layout/box-sizing/ http://tachyons.io/docs/layout/box-sizing/.
slg 8y ago
>Another thing: It's Ok for some elements to be different between browsers. This is one of those lessens that took me a while to learn. I spent a lot of my time early in my career trying to get every pixel the same between between IE and Firefox until someone asked my why I cared. I never gave the "why" much thought until that point; it was just something I felt I needed to do. As long as the site functions correctly and looks good in the various browsers, getting them exactly the same is nothing but a fool's errand.
- Brockenstein 8y ago
  sometimes managers and clients are fools.
  - armandososa 8y ago
    This is true. I stopped worrying about designs being pixel-perfect across browsers around the time I stopped consulting. But I know people who are perfectionists and still care about that level of control and I'm just happy that I am not.
  - ry_ry 8y ago
    Originally loads of people in industry came from print, so I can completely see how pixel perfect layouts were seen as desirable (hell, loads of our idiolect comes directly from print media, show me where a webpage folds over!) and conversely why they've died out over time as a generation of people who grew up with the internet have come through.
  - irrational 8y ago
    I worked with a manager who had a degree in graphic design. He would flip out if the design was even half a pixel off. We came to call him Pixel Perfect Peter (his name wasn't Peter).
    - pwython 8y ago
      I'm a designer and frontend developer. I would find it odd for the end result of an HTML build to look any different from the design. I can't think of a reason why a developer (who's not involved in the UI or UX stages) would need to change anything, even by a pixel. That may also lead to problems down the road. If the mockup uses certain dimensions, paddings, line-heights, etc... why not translate them as indented? Especially in 2018. It wasn't fun making websites cross-browser friendly 20 years ago. Even 10 years ago.
KayL 8y ago
Uncss or similar tools are your friend and time saving if you site is simple and under control. Probably, to clone normalize.css and comment out every lines as starter style is better than this micro reset (applying the same concept)
armandososa 8y ago
There was a time when I would just add *{margin:0;padding:0} at the start of every project and call it a day. That was my reset. Later I found that was considered a bad practice, but honestly? I found CSS is very unlikely to be the bottleneck for performance in most things I deal with nowadays. Anyway, I like this micro-reset but I rarely start css from scratch these days, otherwise I would just memorize these rules.
Kequc 8y ago
Persisting an npm package to your project for 5 css rules is a far more egregious case of "you might not need..." than a simple css reset could ever be.
temporallobe 8y ago
I have always been strongly opposed to CSS resets and global CSS styling rules in general. There really is bo need for it if you know how to isolate your classes correctly. Some Atlassian plugins create global styling rules and they tend to break things.
- dmitriid 8y ago
  The problem isn't with "isolating classes correctly" (how do you isolate classes correctly in CSS' flat namespace?). The problem is that even such basic things as lists and paragraphs will look differently in different browsers (different offsets, sizes, line heights etc.). Unless you cover every single element with a "correctly isolated CSS class", you need a global reset.
- paulddraper 8y ago
  > if you know how to isolate your classes correctly Resets are used precisely because browser defaults are not isolated but applied everywhere. Could you copy or classes or styles everywhere? Yes, you could add a class to every element to reset it, or add full style override to every class.
ericwood 8y ago
I like the reasoning behind this, but am surprised it doesn't include resets for the (fairly opinionated) user agent styles for lists, which I'd argue for most sites get used more often than tables.
escaper 8y ago
You don't need to reset things you won't use... then proceeds to reset tables, table properties, and iframe borders? This is the most nonsensical thing I've seen on here. Also resetting all h elements to weight normal when they're the most likely elements to have non-normal weights.
geuis 8y ago
> Browser Reset -> Your Reset -> Setting all Resetted Elements -> Probably more styling after. I get the feeling the author doesn’t completely understand how this all works and what normalize.css and other resets are for. There is no “browser reset”. There are browser defaults which vary slightly from one to another. The point of normalize.css and other resets is to level the foundation when starting a new project.
Theodores 8y ago
I recently started using CSS Grid with a view to writing concise, maintainable CSS that wasn't 'Jenga CSS' that people only add on to. I also wanted to get away from the 10000+ lines of cruft that many projects seem to think you need. All was going well with the layout but I wanted to avoid margins and padding, instead I wanted to use grid gaps. Initially I did not have the 'bravery' to strip out all 10000 lines of cruft, I assumed some of it was 'important'. However, just 'for a laugh' I thought of getting rid of the normalize.css buried in there, complete with rules for things like IE6/7/8. Much to my surprise my layout suddenly looked awesome, all margin and padding issues resolved. I checked on a few browsers and all is looking very good. The biggest bonus was on the input boxes. These now work much better for layout and usability on all screen sizes. I can use things like the 'size' attribute and make the boxes sensible for what is going to be entered. Fluid width type and no fixed breakpoints are also a huge discovery along with CSS variables. I also gave up on divs and spans, not to mention class tags. Instead of these empty calories I use HTML5 tags with schema.org attributes. If a product has a name, description, price or other attribute, I mark it up for the screen readers first then the CSS can work on those attributes. No need for 37 layers of containing 'div' boxes each with class tags for some lame 'Foundation' style framework. It seems absurd to remove the margin/padding and then have layers of Jenga CSS on top to get it to be as per the some designer's drawing. The major benefit is in speed, I am sure that people who have been creating this unmaintainable CSS bloat for the last decade or find my approach heretical but the scores on the doors of what 'Lighthouse audit' says don't matter to them either. I urge anyone to get rid of the resets as well as the inflatable arm bands and to let go of the hand-rails. Some people have never ventured out without their CSS resets, a bit like those children that have never gone anywhere without being in a car.

63 points by vladocar 8y ago

Wow an NPM package for 5 css rules. Reading the description this guy seems to be searching for normalize.css https://github.com/necolas/normalize.css/blob/master/normalize.css https://github.com/necolas/normalize.css/blob/master/normali...

pornel 8y ago
You're missing the point here. The author is not looking for normalize.css, but advises against such nuke-it-from-the-orbit approaches. It's just 5 rules, because you don't need more. And you can copy'n'paste them if you don't want to bother with npm.
- yoz-y 8y ago
  The reset parent posted does better job of explaining what it does than this micro reset. Which is something the author advocates. I agree with him that you do not need to use rules that do not apply on elements you don't use. However, the multi cascade can be handled by a css preprocessor.
- rootlocus 8y ago
  You mean the original author doesn't need more? I'm all for minimalism, but my minimalism doesn't necessary mean everyone's minimalism. And while the readme mentions you might not need it, or you might need to add to it, IMHO if it's not something that meaningfully solves the problem for a majority of users, and if it's trivially small then it probably isn't that useful.
  - fortyseven 8y ago
    So... guess you don't use it then, eh?
  - birdtime 8y ago
    It's not really useful, no. But it's interesting. I read the readme and the five lines of code as a blog post. It makes a couple good points. First, there's no need to reset elements that aren't being used. Second, a reset file is redundant by nature since it's overwriting a "reset" provided by the browser, that's subsequently overwritten by any custom styling. But yes, in virtually every scenario it's more practical to not think about it and use normalize.
- dosy 8y ago
  Always appreciate a good Aliens reference. Especially when it's helping point out what the parent didn't understand about the approach. I think a minimal set of cross-browser CSS reset rules is a very interesting thing.
lhorie 8y ago
I got a completely different idea from reading the description. He's saying the whole point why this thing is small is that you don't need to keep stacking changes to the same properties, i.e. why do this: /*reset*/ h1 {margin: 0;} /*your pretty styles*/ h1 {margin: 0 0 10px;} He argues that you can just drop the first rule because you're going to be setting it to something else later anyways; you should only reset properties that are likely to be final and only tags you actually use.
- masklinn 8y ago
  That seems like an argument to post-process the CSS and avoid double-setting properties. The point of a reset/normalise stylesheet is to create a coherent and consistent baseline for work, in theory you could actually stop there. Or just alter the reset itself.
- Bluestrike2 8y ago
  Ideally, I don't disagree with the concept behind that approach. Clean, streamlined CSS is nice because it's generally easier to work with. Browser page inspectors help with that, though. You aren't searching up and down a file sheet to figure out what rules are applicable in a given context. Resets (normalize.css or any other) are about consistency. Both between browsers and between projects. When you import one, you know what you're getting and don't have to think about it outside some edge cases. This micro reset eliminates that and forces you to figure out your reset needs each and every time. Odds are, you'll miss something at some point. That's especially likely when it comes to accessibility; good resets try to take it into account to avoid screwing users who rely on screen readers and other assistive tech, for instance. They don't always manage it, but their shortcomings are at least consistent. That makes it easier to fix. Besides, there are already a lot of tools and options to accomplish the stated goals. You could wrap less commonly used reset rules in conditionals and set variables to disable certain ones (forms being the example given). Build tools have improved a lot in recent years. You can use things like cssnano[0] to help you optimize your stylesheets when they're built. On the other hand, how important is this anyhow? Browsers are highly optimized. Having tons of duplicate media queries throughout a stylesheet (common when dealing with preprocessors and media query mixins) doesn't impact performance, for instance.[1] No reset is going to have a measurable performance impact in adding a handful of duplicate selectors. As for file size, gzip is extraordinarily efficient when it comes to dealing with property and selector names. If you're implementing something like this for performance reasons, the time spent crafting the smallest possible reset for each site you work on would be better spent elsewhere. 0. http://cssnano.co/ http://cssnano.co/ 1. https://helloanselm.com/2014/web-performance-one-or-thousand-media-queries/ https://helloanselm.com/2014/web-performance-one-or-thousand...

thex10 8y ago

The contents: /* CSS Micro Reset */ body { margin: 0 } h1, h2, h3, h4, h5, h6 { font-weight:normal } table { border-collapse: collapse; border-spacing: 0 } th, td { text-align: left; vertical-align: top } img, iframe { border: 0 }

danyim 8y ago
What a joke. Where’s box-sizing: border-box, the most common reset of all? Is this another JS engineer seeking Github stars?
- vladocar 8y ago
  I love your reference. I love it so much that I changed my github profile to: "Just another Full Stack Developer seeking the stars." :):)
Reedx 8y ago
Though maybe it's nice to have the options, that this is an NPM package and CDN link seems like a parody.

andrewmcwatters 8y ago

There's no such thing, to my knowledge, as a "browser reset"; there is a standardized normative default user-agent style sheet for HTML4 as specified in CSS level 2. I agree with everything else the author is saying, though. But there's no point in this existing when normalize.css does. Even then, you really shouldn't be using that in my opinion for the same reasons the author specifies.

vladocar 8y ago
Yes, I've used the word "browser reset" but is just "default browser style". Here is the webkit style: https://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css https://trac.webkit.org/browser/trunk/Source/WebCore/css/htm...

saudioger 8y ago

I agree with the gist of things here, but surprised this doesn't include * {box-sizing: border-box;}

vladocar 8y ago
That will force you to use completely different CSS layout model. Yes today is common practice the use of box-sizing: border-box and it should be the first line of code when you set your layout. I don't what to force anyone to use box-sizing: border-box.
- actionscripted 8y ago
  > ...it should be the first line of code...I don't what to force anyone to use box-sizing: border-box. I'm not clear on what you're saying. It sounds like you're saying today it's absolutely something you should use but you don't want to force it?
  - vladocar 8y ago
    "It sounds like you're saying today it's absolutely something you should use but you don't want to force it?" Yes, correct. Let me explain.. that is the most important decision you make when you plan your CSS layout. But is your decision to make. You can absolutely add this in the reset. Feel free to add stuff in the reset.
- saudioger 8y ago
  I suppose the argument against it is that you're not normalizing something across browsers... you're changing it? Right?
  - extra88 8y ago
    It sort of normalizes the box model in every browser to be like IE6.

brianzelip 8y ago

Thanks, this is just what it says it is. Particularly appreciate the insight into headings. `box-sizing` can be more nuanced than a wild card approach. On production stuff, I tend to use Tachyons’ module, http://tachyons.io/docs/layout/box-sizing/ http://tachyons.io/docs/layout/box-sizing/.

slg 8y ago

>Another thing: It's Ok for some elements to be different between browsers. This is one of those lessens that took me a while to learn. I spent a lot of my time early in my career trying to get every pixel the same between between IE and Firefox until someone asked my why I cared. I never gave the "why" much thought until that point; it was just something I felt I needed to do. As long as the site functions correctly and looks good in the various browsers, getting them exactly the same is nothing but a fool's errand.

Brockenstein 8y ago
sometimes managers and clients are fools.
- armandososa 8y ago
  This is true. I stopped worrying about designs being pixel-perfect across browsers around the time I stopped consulting. But I know people who are perfectionists and still care about that level of control and I'm just happy that I am not.
- ry_ry 8y ago
  Originally loads of people in industry came from print, so I can completely see how pixel perfect layouts were seen as desirable (hell, loads of our idiolect comes directly from print media, show me where a webpage folds over!) and conversely why they've died out over time as a generation of people who grew up with the internet have come through.
- irrational 8y ago
  I worked with a manager who had a degree in graphic design. He would flip out if the design was even half a pixel off. We came to call him Pixel Perfect Peter (his name wasn't Peter).
  - pwython 8y ago
    I'm a designer and frontend developer. I would find it odd for the end result of an HTML build to look any different from the design. I can't think of a reason why a developer (who's not involved in the UI or UX stages) would need to change anything, even by a pixel. That may also lead to problems down the road. If the mockup uses certain dimensions, paddings, line-heights, etc... why not translate them as indented? Especially in 2018. It wasn't fun making websites cross-browser friendly 20 years ago. Even 10 years ago.

KayL 8y ago

Uncss or similar tools are your friend and time saving if you site is simple and under control. Probably, to clone normalize.css and comment out every lines as starter style is better than this micro reset (applying the same concept)

armandososa 8y ago

There was a time when I would just add *{margin:0;padding:0} at the start of every project and call it a day. That was my reset. Later I found that was considered a bad practice, but honestly? I found CSS is very unlikely to be the bottleneck for performance in most things I deal with nowadays. Anyway, I like this micro-reset but I rarely start css from scratch these days, otherwise I would just memorize these rules.

Kequc 8y ago

Persisting an npm package to your project for 5 css rules is a far more egregious case of "you might not need..." than a simple css reset could ever be.

temporallobe 8y ago

I have always been strongly opposed to CSS resets and global CSS styling rules in general. There really is bo need for it if you know how to isolate your classes correctly. Some Atlassian plugins create global styling rules and they tend to break things.

dmitriid 8y ago
The problem isn't with "isolating classes correctly" (how do you isolate classes correctly in CSS' flat namespace?). The problem is that even such basic things as lists and paragraphs will look differently in different browsers (different offsets, sizes, line heights etc.). Unless you cover every single element with a "correctly isolated CSS class", you need a global reset.
paulddraper 8y ago
> if you know how to isolate your classes correctly Resets are used precisely because browser defaults are not isolated but applied everywhere. Could you copy or classes or styles everywhere? Yes, you could add a class to every element to reset it, or add full style override to every class.

ericwood 8y ago

I like the reasoning behind this, but am surprised it doesn't include resets for the (fairly opinionated) user agent styles for lists, which I'd argue for most sites get used more often than tables.

escaper 8y ago

You don't need to reset things you won't use... then proceeds to reset tables, table properties, and iframe borders? This is the most nonsensical thing I've seen on here. Also resetting all h elements to weight normal when they're the most likely elements to have non-normal weights.

geuis 8y ago

> Browser Reset -> Your Reset -> Setting all Resetted Elements -> Probably more styling after. I get the feeling the author doesn’t completely understand how this all works and what normalize.css and other resets are for. There is no “browser reset”. There are browser defaults which vary slightly from one to another. The point of normalize.css and other resets is to level the foundation when starting a new project.

Theodores 8y ago

I recently started using CSS Grid with a view to writing concise, maintainable CSS that wasn't 'Jenga CSS' that people only add on to. I also wanted to get away from the 10000+ lines of cruft that many projects seem to think you need. All was going well with the layout but I wanted to avoid margins and padding, instead I wanted to use grid gaps. Initially I did not have the 'bravery' to strip out all 10000 lines of cruft, I assumed some of it was 'important'. However, just 'for a laugh' I thought of getting rid of the normalize.css buried in there, complete with rules for things like IE6/7/8. Much to my surprise my layout suddenly looked awesome, all margin and padding issues resolved. I checked on a few browsers and all is looking very good. The biggest bonus was on the input boxes. These now work much better for layout and usability on all screen sizes. I can use things like the 'size' attribute and make the boxes sensible for what is going to be entered. Fluid width type and no fixed breakpoints are also a huge discovery along with CSS variables. I also gave up on divs and spans, not to mention class tags. Instead of these empty calories I use HTML5 tags with schema.org attributes. If a product has a name, description, price or other attribute, I mark it up for the screen readers first then the CSS can work on those attributes. No need for 37 layers of containing 'div' boxes each with class tags for some lame 'Foundation' style framework. It seems absurd to remove the margin/padding and then have layers of Jenga CSS on top to get it to be as per the some designer's drawing. The major benefit is in speed, I am sure that people who have been creating this unmaintainable CSS bloat for the last decade or find my approach heretical but the scores on the doors of what 'Lighthouse audit' says don't matter to them either. I urge anyone to get rid of the resets as well as the inflatable arm bands and to let go of the hand-rails. Some people have never ventured out without their CSS resets, a bit like those children that have never gone anywhere without being in a car.