Hacker News Reader

Comment by mattkevan | Hacker News Reader

Good comment.

CSS is actually pretty simple, as long as you start with the smallest elements and work up. It becomes a nightmare if you try and address everything individually. It’s not really a programming language, but a series of guidelines.

I’ve seen this simplicity actually throw developers as they’re used to something much more complex and systematic.

Preprocessors like SASS are great, but I wonder if they’re designed to complicate CSS a bit so developers feel at home.

Pixel perfect design is totally possible, as long as the designer is aware of the constraints and opportunities of the medium they’re working in.

View on HN

Pixel perfect is not possible in HTML/CSS. Stop spreading this.

But it is very possible to make websites look very good and inline with what was designed.

But good luck making an input, button and select the same height. It's just not going to be pixel perfect.

What is pixel perfect in your browser isn't in others.

But what designers should now is it doesn't matter as long as it looks good for everyone.

The key part of my point was "as long as the designer is aware of the constraints and opportunities of the medium they’re working in."

Designers coming from print often get caught out when designing for the web as they tend to think of a webpage as a fixed layout, rather than a flexible system of components.

It's also important to understand where the design and development budget should be effectively spent. For example, unless there's a real business or usability reason for doing so, there's little point in trying to custom-style form elements like selects as doing so is difficult and time consuming and system defaults look better and provide a more consistent experience.

We demand pixel-perfect accuracy at work between design and code – but the developers must approve the designs first to confirm that it's achievable.

I guess it comes down to what we define as 'pixel perfect'.

> I guess it comes down to what we define as 'pixel perfect'.

When the customer hears "pixel perfect" they don't think "different on different browsers and on different OSs and on different devices", they think "the same everywhere".

Sometimes the target is a known browser version on a known OS (eg. intranet sites). Those are a lot simpler and (arguably) fun to make.

That should be one of the first conversations had with a client. It's all about managing expectations.

During the pitch meeting we'd point at the big TV in the meeting room, their laptop and smartphones and (maybe) watch, and explain that while we could make their site look great on everything, it wouldn't look the same.

> Pixel perfect is not possible in HTML/CSS. Stop spreading this.

It absolutely is possible—we used to do it all the time back in the table layout days—but it is not desirable. They are inherently fragile (often users can break them just by changing the default text size), and they do not adapt to different screen sizes very well.

> But good luck making an input, button and select the same height. It's just not going to be pixel perfect. What is pixel perfect in your browser isn't in others.

It's... actually incredibly easy to do that. You just disable the browser's default styles for those elements and then set their height explicitly.

There is a certain interpretation of "pixel perfect" which, I agree, isn't really feasible or worth trying to achieve, and that's when it comes to layout. You can hardcode the dimensions of "atomic" elements like buttons and inputs all you want, but if you start giving hard pixel widths to containers that should be adjusting their size according to their content and surroundings, you're going to get yourself into trouble real fast. I think designers these days have mostly started to grasp this, though.

> But good luck making an input, button and select the same height. It's just not going to be pixel perfect.

Sure you can. Just see how Bootstrap does it.

It is true that for a long time, input controls were rendered using the native platform controls, so there were are a lot of differences and limited styling capabilities. But these days all browsers (as far as I am aware) use the browser rendering engine for input controls, and they are fully stylable.

Some preprocessors definitely overcomplicate things, but I consider SCSS to be essential because of three features:

1) Nested selectors

2) Imports

3) Variables

#3 is now solved/being solved natively, but I couldn't live without #1 and I'm not really sure why it hasn't been added natively yet

I don't think sass/less complicate this, they just bring in some familiar and useful elements.

How much further could css have gone on its own had it supported variables and functions from the get-go?

SASS is incredibly helpful so I think it is worth the pain. It is game changer, and still it can be learned in a few hours. Before SASS, managing z-index across a whole template or changing colors was a nightmare.

(If you are old enough, you may have come across one of those WordPress templates in which they crammed PHP $variables inside inlined CSS. #goodolddays)

Reply on news.ycombinator.com