Cssnext: use tomorrow’s CSS syntax, today | Hacker News Reader

Cssnext: use tomorrow’s CSS syntax, today

cssnext.io

85 pointstbassetto46 comments

I'd recommend getting a native English speaker to proof-read your text. 'More faster' was used repeatedly on the page and should be simply 'faster'. There were a few other typos, (e.g. 'A bug fixed will be released ASAP.') and very non-idiomatic sentence constructions. It might be a solid undercarriage, but now's the time to polish the hood.

Also, I'd def. remove the movie screenshots. You could still use imagery that evokes the film but isn't trademarked or under copyright - like an image (not from the film) of flaming tire tracks for example.

Thanks for reporting that. I am french and the website is really fresh (pushed this morning). I will do my best to improve it and remove images.

In the part with, "Why cssnext?" there's "Prior 2015", which is sorta correct but might be better worded with "Before 2015," or "Prior to 2015"...

I've fixed the mistakes you mentionned and removed copyrighted images.

Can anyone give me a top level overview of why I should use cssnext, and not for example just roll my own postcss pipeline?

cssnext is following w3c standards. That's the only reason, and the best one I think.

Can I run this in-browser without the command line? LESS is very easy to get started with - just include less.js and a developer can start writing LESS right away: http://lesscss.org/#client-side-usage-browser-options - anything similar for cssnext?

Does cssnext support source maps? This is an important feature for any non-trivial project, as it lets a developer inspect how the rules in the source language are translated into the rules read by the browser. Support for source maps in Chrome Developer Tools makes a workflow much more efficient: https://developer.chrome.com/devtools/docs/css-preprocessors

cssnext has some features that LESS doesn't like auto prefixing CSS rules according to your browser scope. So it rely on caniuse database which is why it's not a good idea to use it on the client side. That being said, there is a playground so you can try it http://cssnext.io/playground/

SourceMap is supported, see options http://cssnext.io/usage/#sourcemap

I'm surprised they are using copyrighted images from a movie as their background.

Good point. I will add credits for the images. Not sure if it's enough but it's a start.

> I will add credits for the images.

it's not enough, it doesn't give you the right to use these pictures. IANAL but this is common sense. Doesn't mean they'll go after you but it is certainly enough for a DMCA take down request. You don't need these pictures at first place anyway.

That's not how copyright works.

You don't have a license for those images, so you can't use them. Period.

Fair use only applies under certain circumstances where using copyrighted materials is necessary (e.g. satire or discussion). Even if you don't use them commercially, you can't just use them like that.

I will keep that in mind and will update the website asap to remove those.

http://www.morguefile.com is a handy resource for finding 100% safe images.

So how about all these slideshow presentations we see online (or videos of presentations, etc.) that use clips from movies, TV shows, memes, and so on? Are the copyrighted materials really necessary in those? I'd argue they're as necessary to a presentation as they are to a website, yet you never hear people on HN comment that the copyrighted material is out of place in those settings.

In some cases they probably are infringing too. But it seems worse in my opinion using copyrighted media as your main background for a promotional site. Putting a meme into a presentation slide, you may be right, it may also be legally infringement, but we kinda look the other way because it doesn't seem as promotional in nature.

They would probably come under some commonly accepted exception such as homage, humour, demonstration, reporting, and so on. The examples currently on this page the images in question are part of the page design so are functioning as part of a derived work.

Distinctions like this are rather fuzzy, but I think this sits the other side of the line most people would draw then the pages you mention.

(For reference, dear reader, in case the pages changes between me writing this and you reading it, the linked page contains stills from Back To The Future used as background images.)

> yet you never hear people on HN comment that the copyrighted material is out of place in those settings.

Some parts of HN don't make that kind of meta style comment because it's off topic for HN. But here it's a risk for the site owner - DMCA could remove their site - and so people mention it.

There are people who could mention copyright at every applicable opportunity and I'm glad that they don't. (Although I would like a place for that kind of comment! Also, tpyos).

Nothing in the 4 criteria implies necessity. http://en.wikipedia.org/wiki/Fair_use#Fair_use_under_United_...

Its a simplification, and not a very incorrect one. The purpose of Fair Use is to reserve for society those uses that benefit society more then they hurt copyright owners. Whether a use is "necessary", while not a legal definition, is a pretty good rule of thumb for some possible Fair Use defenses.

ETA: also this is completely ignoring any relevant international laws. French law, which is where the OP lives, appears to provide some protections for "necessary" use.

"The Court of Appeal disagreed and applied French law. Nevertheless, it too rejected plaintiff's claim and decided that Google benefited from the "safe harbor" provisions of the Loi sur la Confiance dans l'Economie Numérique [the relevant French statute]. It considered Google as being a "neutral" actor and the reproduction of the photos necessary to provide the service."

http://cyberlaw.stanford.edu/blog/2011/01/who-said-france-do...

Yes. It's a simplification.

Necessity isn't a criterion for fair use, it's the reason fair use provisions exist in the first place.

Making satire of or discussing a copyrighted work without using copyrighted material is extremely awkward if at all possible. Internationally speaking (i.e. aside from the specific definition of fair use in US law), necessity is a good rule of thumb, just like profit/non-profit use.

Copyrighted images have been removed now.

I looked into this for my current project, but in my opinion you have to leave behind too many things if you do this instead of Sass. Namely:

-No mixins

-No maps

-No loops and conditionals

Maybe a couple of years ago, but now that libsass runs so fast I still don't see the point of using this.

Because you're writing standards-track CSS. That's the reason. If that doesn't appeal to you, then that's understandable. It does appeal to some, myself included.

In addition, it's built using PostCSS (meaning you can use cssnext as a plugin into PostCSS.) Using PostCSS you can achieve all of your bullet points. Today.

Of course that this can appeal to people, I'm just curious about what I'm missing. That PostCSS looks more useful to me, you're right. What is the alternative to the standards-track CSS that could benefit from this?

A lot of people stopped using those things. With a good methodology and a UI component approach, you will find yourself to not need mixins loops etc.

I stopped using Sass some years ago and I can definitly live without those features. Maybe one missing thing is extend, but it's comming, a CSS spec is in draft ;)

Have you abandoned preprocessors altogether?

Yep! Some example are http://cssrecipes.github.io/ (from me & friends) and http://www.basscss.com/

Perhaps more importantly no support for partials. But I guess your task runner can deal with that.

You can totally support partials. By default, csssnext inline @import directive. Like all css processors.

The point of using it is to get back to native CSS, and restrict yourself to features that improve simplicity, adaptability and architecture of large CSS code bases.

Using a nice component based architecture (perhaps like SUITCSS) and this you can write really maintainable CSS, that can be understood by everyone, now and in the future, not just those that have learnt Sass.

Using a nice component based architecture and Sass you can also achieve the same, for me is more maintainable changing a key value in a map and having a new type of button generated than having to copy/paste the rules. And I think learning Sass is not that difficult if you already know css.

Not having lots of nested divs with lots of class names also helps to code readability and maintainability if you use something like React with JSX.

I see advantages in not needing to precompile in the future, but apart from that I see this as a step back, of course it's my opinion, I see how this can work for other people.

How is this different from Myth (http://www.myth.io/)?

- more features

- way faster

- less bugs

- maintained

Sounds good. Thanks.

I'm thinking about starting integrating this into my projects. However there is a couple of things that irritate me,

- SASS is already serving all my needs

- Current css frameworks are all on sass or less

- Specs could change before CSS4 is released.

- Good for you :)

- You probably don't need a framework

- There is no such things as CSS 4 http://www.xanthir.com/b4Ko0 . That said, cssnext will handle features like babeljs, using different stages. An issue is opened for this https://github.com/cssnext/cssnext/issues/100

"You probably don't need a framework"

Care to explain? And how does babeljs fit in?

Sass not SASS http://sassnotsass.com/

Who cares?

I took a look at cssnext while going through the source for the 'Solved by Flexbox' website which was front page last week (https://github.com/philipwalton/solved-by-flexbox/). It looks like it does a lot of what sass does, except that it will actually be CSS soon. I suppose it's kind of like using an ES7-to-ES5 transpiler rather than using some other compile-to-JS language; it's a matter of preference, but the ES7 will eventually run without dependencies as well when the transpile step is no longer needed.

It'd be nice to see CSS frameworks rewritten using pure CSS (transpiled with cssnext); in fact I might give it a try if I get motivated :)

Check out http://cssrecipes.github.io/ (from me & friends) and http://www.basscss.com/

http://www.basscss.com/docs/base-buttons/

Perhaps shouldn't be asking here, but why does a button element get a different style than .button links and inputs?

I like the idea of this library, but that's not leaving a good taste in my mouth.

It's cssnext, not Cssnext or CSSNext :)

http://cssnext.io/it-s-cssnext-not-CSSNext/

HN automatically makes the first letter of the title uppercase AFAIK.

That is true. I think you can work around it by prepending a space to the title. So this one would be " cssnext: use tomorrow's CSS syntax, today".

Reply on news.ycombinator.com