
CSS Micro Reset - vladocar
https://github.com/vladocar/CSS-Micro-Reset
======
slg
>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
sometimes managers and clients are fools.

~~~
Semiapies
No kidding. I don't support IE at all, much less slave to make pages look the
same in it, because I _want_ to. I don't try to make things look the same in
desktop browsers because I have some ideological devotion to the idea. I do
that because otherwise, the clients whine.

Every time I see someone go, "Hey, have you ever thought of a page design,
like, _not_ being consistent between browsers?" and seeming to expect readers'
minds to be blown, it makes me want to ask, "Have you ever considered doing
this, like, as a job?"

~~~
slg
Maybe I have just been lucky, but I have never had a job in which my only
function was to translate a design doc or mockup into a website. I couldn't
imagine working in that type of environment for long. Part of the job has
always been to talk through design choices with bosses or clients because it
is easy for a non-developer to make a decision they don't feel strongly about
that would add a multiplier to the development timeline. So my original
comment wasn't purely about my own preferences. It was also realizing the
benefit of pixel perfect design is negligible and that I should be willing to
argue against it when the issue is brought up.

~~~
Semiapies
_Maybe I have just been lucky, but I have never had a job in which my only
function was to translate a design doc or mockup into a website._

Neither have I, funnily enough.

------
hit8run
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/normali...](https://github.com/necolas/normalize.css/blob/master/normalize.css)

~~~
pornel
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.

~~~
rootlocus
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.

~~~
birdtime
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.

------
thex10
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
What a joke. Where’s box-sizing: border-box, the most common reset of all? Is
this another JS engineer seeking Github stars?

~~~
vladocar
I love your reference. I love it so much that I changed my github profile to:
"Just another Full Stack Developer seeking the stars." :):)

------
saudioger
I agree with the gist of things here, but surprised this doesn't include

    
    
        * {box-sizing: border-box;}

~~~
vladocar
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
> ...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
"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.

------
escaper
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.

------
Kequc
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.

------
armandososa
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.

------
geuis
> 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.

------
brianzelip
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/).

------
temporallobe
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
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.

------
Theodores
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.

------
KayL
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)

------
ericwood
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.

------
andrewmcwatters
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
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/htm...](https://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css)

