Hacker News Reader

Comment by elorant | Hacker News Reader

As a developer I hope that CSS would share a similar fate sometime in the not too distant future. It’s freaking hideous, doesn’t work as it should and in order to build any decent modern site you end up writing something like 5,000 LoC. Nine out of ten times I want to do something with CSS I prefer doing it with JavaScript.

View on HN

"Nine out of ten times I want to do something with CSS I prefer doing it with JavaScript"

You're doing something wrong then.

center a div both vertically and horizontally to the viewport; also it should stay center when resized.

Absolute Horizontal And Vertical Centering In CSS

http://coding.smashingmagazine.com/2013/08/09/absolute-horiz...

Truth. The div would need a variable height though which would change the design.

The page linked includes techniques for both variable height content (e.g. translate -50%) and fixed content.

Although this used to be a problem with CSS, it has been fixed in modern browsers: http://philipwalton.github.io/solved-by-flexbox/demos/vertic...

Now make it work across all browsers and operating systems required by your customer.

You can use viewport units in modern browsers. See here http://caniuse.com/viewport-units

When you have modern CSS frameworks like Bootstrap and Foundation available, the CSS aspect of a website is arguably one of the least complicated aspects of front-end development. (and better for the users instead of using JavaScript)

Even animations are easier to do in CSS due to CSS3 animation libraries.

Err Bootstrap isn't a complete solution.

Neither is HTML+CSS.

For a startup landing page layout, Bootstrap is more than enough. (see examples at http://www.blacktie.co )

If you want interactivity via AJAX/Angular, you'll need to include some sort of JavaScript of course, but that's outside the scope of the layout question.

Bootstrap is javascript.

No it isn't. The majority of the Bootstrap framework is CSS. (there's an optional JavaScript component for advanced functionality)

Maybe he's using Netscape 4, in which case CSS would also be JavaScript, more or less. http://www.netmechanic.com/news/vol4/css_no17.htm

Bootstrap contains some JavaScript for certain modules, but the majority is CSS (well, Less).

Ok, cool. But Less is also javascript!

No LESS is a stylesheet language that compiles down to CSS. Javascript isn't involved at all, unless you use their script tool to run uncompiled LESS in the browser. That is only meant for prototyping though, in production it will be compiled down to CSS.

What the client sees is CSS, and that's the important part.

The important part for elorant (and me) is that CSS is awful to work with. And everyone in this thread is proving it by pointing out that you should use some kind of translation layer instead of actually touching it.

Well, there's two things at play here. The complexity of the CSS model in the browser (plus all the browser-specific quirks) and the CSS syntax. Less only solves the CSS syntax issue.

My reading of this thread is that it was started based on the complexity of dealing with CSS in the browser rather than dealing with the CSS syntax.

CSS also has serious issues with its design (not just syntax) - it's a pretty awful markup language, because it was created apparently without reference to hundreds of years of graphic design and text layout and missed out some essential typographic and design concepts.

To pick a few examples, until recently you couldn't have grids, multiple columns of text (still pretty broken), embedded fonts, and the box model is unnecessarily complex, which led to loads of bugs in the browsers. That's easy to say in retrospect of course, and lots of the problems are now being fixed or worked around, but it's a pretty gnarly language, and many criticisms of it are not based only on ignorance but on substantial flaws in the original design. CSS is awful to work with, and is only slowly getting better.

The slowness is largely due to competing interests & implementations by those interests. I don't think blowing away CSS completely would be a good solution - just look at the skepticism by many over Google trying to implement Dart in Chrome, and whether it'd be successful in eliminating JavaScript.

I don't think blowing away CSS completely would be a good solution

Sure, it's not all bad, it got off to a pretty flawed start, but has been steadily improving.

It does suck to work with, but it is workable if you put in the time investment to learn it, just like any language. Nothing that justifies flat out incorrect statements/dramatic behavior.

I agree that something is wrong with CSS. When you have to resort to hacks when making columns and vertically centering things... you know something is wrong.

Maybe vendors and browser fragmentation is what you are referring to?

no, CSS itself is a bit shit, that's why LESS and SASS came along

I wasn't talking about transpilers, i was referring to vendors support for every major browser.

Does LESS or SASS fix the things I mentioned above?

no :(

LESS and Sass compile to CSS.

Can you provide any examples where using JS would be preferable to you? Maybe we can help?

> I want to do something with CSS I prefer doing it with JavaScript.

So now you're you're still writing css, but in JS files instead? Not taking advantage of shorthand transitions, keyframe animations, or :before/:after stylings.

SASS/LESS helps a lot (not to mention straight up frameworks like Bootstrap or Foundation), but what you're doing is even harder to maintain than structured CSS files.

Use Sass. Thank me later.

Or LESS! I personally prefer that over Sass.

Or Stylus.

Reply on news.ycombinator.com