Live data from Hacker News

A modern responsive front-end framework based on Material Design

materializecss.com

51–60 of 96 posts

Re: A modern responsive front-end framework based on Material Design

#51
post #10

Earlier quoted context omitted.

I dont do this repeating class business but CSS Tricks 'css guidelines' web page says that when you do : '.collection li', it first searches through the page for all 'li's then wittles it down to the ones within the correct parent. Essentially that css selectors work from right to left. So I guess the idea is that classing up the li elements within a parent may be marginally quicker? I have never bothered though. Doe…

Modern browsers do their best to optimize typical use-cases for CSS selectors and .collection li for sure will be handled optimally. You shouldn't worry about CSS selector performance unless you have to provide good performance for very old browsers or hit specific performance problem. Optimize for humans, not for computers.

Mozilla disagrees.

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Writi...

They explicitly state using css classes is more performant than using tags.

I'd be interested in a CSSPerf(Do they have those?)

Re: A modern responsive front-end framework based on Material Design

#52
post #33

Nice. I'm not a Google fanboy, but I believe Material is the best visual language for UI. Okay, there are different contexts, but it's best thought-through, and most modern. For instance, the use of animation is finally mature and at the same rich and amplifying user experience (rather than being an eye-candy). And I think it's very compatible with web apps. A Material-ish popular chess site: http://en.lichess.org/ (…

What? Why? I personally find Material to be hideous because of its color abuse. It makes your UI look like an over-saturated Fischer-Price toy because of all the bright primary colors everywhere, and that's before we get into the lack of shadow and shading that seems to have infected "modern" design.

Colors are easily changed, and certainly expected to be changed for reach site; that really isn't relevant to the tech being present. And are you railing against flat design in general? This is another personal preference religious war that's been waged back and forth since the advent of digital design. Don't worry, the pendulum will undoubtedly swing back your way again in a few years.

Re: A modern responsive front-end framework based on Material Design

#53
post #33

Nice. I'm not a Google fanboy, but I believe Material is the best visual language for UI. Okay, there are different contexts, but it's best thought-through, and most modern. For instance, the use of animation is finally mature and at the same rich and amplifying user experience (rather than being an eye-candy). And I think it's very compatible with web apps. A Material-ish popular chess site: http://en.lichess.org/ (…

What? Why? I personally find Material to be hideous because of its color abuse. It makes your UI look like an over-saturated Fischer-Price toy because of all the bright primary colors everywhere, and that's before we get into the lack of shadow and shading that seems to have infected "modern" design.

Also, with respect to color, Material is by no means limited to (or even promoting) primary colors: http://materializecss.com/color.html

Re: A modern responsive front-end framework based on Material Design

#55
post #9

This looks really good, but the jQuery dependency makes it unfortunately less interesting. It should be possible to have the jQuery dependency optional, possibly only for legacy browser support.

On the other hand, supporting jQuery makes it better on my end because it's easy to integrate.

Re: A modern responsive front-end framework based on Material Design

#56

"Generally it is wise to import javascript files at the end of the body to reduce page load time." Does this really make a difference? Even if it did, wouldn't it lead to seeing a jump in the content after the CSS loads?

Yep. If you link a javascript file your browser needs to parse that URL, open the connection, download the asset, etc. all before drawing something on the screen.

As a general best practice don't load -any- javascript in the head. Only at the end of the body tag right before ``

Re: A modern responsive front-end framework based on Material Design

#57
post #6

Earlier quoted context omitted.

Tell your lead front dev this approach isn't best practice at all. You want one collection li's to not have the style? Use an alternative class on the ul: "collection collection-alt". You want nested li's to not inherit the styles? Use ".collection > li" in your CSS. In any case, assigning a class on each li goes exactly against CSS best practices, because it prevents taking advantage of the inheritance of property v…

There are performance considerations as well. Using selectors is more performant than raw tags. https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Writi... Using nesting and tags is less performant than classes. So using more classes is better than less.

That article is old

> Note: This document was originally written in 2000. Much has changed when it comes to writing CSS that is fast.

Re: A modern responsive front-end framework based on Material Design

#59
post #33

Nice. I'm not a Google fanboy, but I believe Material is the best visual language for UI. Okay, there are different contexts, but it's best thought-through, and most modern. For instance, the use of animation is finally mature and at the same rich and amplifying user experience (rather than being an eye-candy). And I think it's very compatible with web apps. A Material-ish popular chess site: http://en.lichess.org/ (…

What? Why? I personally find Material to be hideous because of its color abuse. It makes your UI look like an over-saturated Fischer-Price toy because of all the bright primary colors everywhere, and that's before we get into the lack of shadow and shading that seems to have infected "modern" design.

I'll take the opposite side - pastel colors are horrible and disgusting. I can't imagine why anyone would like pastel colors.

Re: A modern responsive front-end framework based on Material Design

#60

Earlier quoted context omitted.

It doesn't violate DRY. The repetition of "collection" is indicating a descendent component: https://github.com/suitcss/suit/blob/master/doc/naming-conve...

HTML provides nesting. Nesting indicates it is a descendent component. This would violate DRY.

LIs are generic containers--the only way to narrowly scope LIs is to use hierarchical selectors, which leads location dependency and specificity issues. The class name creates a scope and you need to apply that to decedent components to enforce the scope. It's DRY within the naming convention, which doesn't mix element selectors with class selectors (or at least rarely).
Post reply on HN