[elorant]

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.

[thoughtpalette]

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

You're doing something wrong then.

[debt]

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

[thoughtpalette]

Absolute Horizontal And Vertical Centering In CSS

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

[debt]

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

[proexploit]

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

[ptx]

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

[pjmlp]

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

[elclanrs]

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

[minimaxir]

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.

[crimsonalucard]

Err Bootstrap isn't a complete solution.

[minimaxir]

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.

[sp332]

Bootstrap is javascript.

[minimaxir]

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

[ptx]

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

[mintplant]

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

[sp332]

Ok, cool. But Less is also javascript!

[ben336]

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.

[minimaxir]

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

[sp332]

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.

[crimsonalucard]

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.

[jbeja]

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

[anentropic]

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

[jbeja]

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

[crimsonalucard]

Does LESS or SASS fix the things I mentioned above?

[_a]

no :(

[johnjlocke]

LESS and Sass compile to CSS.

[ChikkaChiChi]

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

[SDGT]

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

[jsnk]

Use Sass. Thank me later.

[bluetidepro]

Or LESS! I personally prefer that over Sass.

[jbeja]

Or Stylus.