>Another thing: It's Ok for some elements to be different between browsers.<p>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.
Wow an NPM package for 5 css rules. Reading the description this guy seems to be searching for normalize.css <a href="https://github.com/necolas/normalize.css/blob/master/normalize.css" rel="nofollow">https://github.com/necolas/normalize.css/blob/master/normali...</a>
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.
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.
There was a time when I would just add<p><pre><code> *{margin:0;padding:0}
</code></pre>
at the start of every project and call it a day. That was my reset.<p>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.<p>Anyway, I like this micro-reset but I rarely start css from scratch these days, otherwise I would just memorize these rules.
> Browser Reset -> Your Reset -> Setting all Resetted Elements -> Probably more styling after.<p>I get the feeling the author doesn’t completely understand how this all works and what normalize.css and other resets are for.<p>There is no “browser reset”. There are browser defaults which vary slightly from one to another.<p>The point of normalize.css and other resets is to level the foundation when starting a new project.
Thanks, this is just what it says it is. Particularly appreciate the insight into headings.<p>`box-sizing` can be more nuanced than a wild card approach. On production stuff, I tend to use Tachyons’ module, <a href="http://tachyons.io/docs/layout/box-sizing/" rel="nofollow">http://tachyons.io/docs/layout/box-sizing/</a>.
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.
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.<p>All was going well with the layout but I wanted to avoid margins and padding, instead I wanted to use grid gaps.<p>Initially I did not have the 'bravery' to strip out all 10000 lines of cruft, I assumed some of it was 'important'.<p>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.<p>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.<p>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.<p>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.<p>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.<p>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.
Uncss or similar tools are your friend and time saving if you site is simple and under control.<p>Probably, to clone normalize.css and comment out every lines as starter style is better than this micro reset (applying the same concept)
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.
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.<p>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.