Tight CSS

[Dani]

I'm working tonight on tightening up the CSS (reducing the amount of whitespace, margins, padding, etc.). Back in the day, this was super important because people wanted to have to do less scrolling, and see more content above-the-fold. Then monitors got bigger and bigger and resolutions got higher and it wasn't necessarily as important anymore. But now people are using tablets and smaller form factors again ... Just curious what your opinions are.

[gentlemedia]

It's always good to tightening up your assets. You can also automate this (minifying, concatenation and such) with a task runner like Grunt or Gulp before you deploy to a live server.

These days people recommend to load your critical CSS (the CSS that's needed for your content above the 'fold') inline (between style tags in the head) for each page/template. But like you said where that 'fold' is nowadays with all the different screen resolutions out there, is a bit blurry :)

Depending on the browsers you target there is also prefetching, preloading and prebrowsing, but then you could use loadCSS as fallback.

[jkon]

Hello Dani, although as I have wrote many times I am pro adaptive – first / responsive - second architecture in front end , your subject make sense in every front end architecture. Google has the 48px rule in mobiles ( https://developers.google.com/speed/docs/insights/SizeTapTargetsAppropriately ) . Although I was skeptical about it when I first implemented it ( usually I do what they suggest and then evaluate it , and if it doesn't make any sense even after a half of a year I through it away). But it clearly resulted to an increase of “in site” browsing in eshops that had this (not in tablets, only in mobiles) , so they made their work and they were accurate about this.

Having in mind the 48px rule , I think that you couldn't have more margins or paddings than that. If you are browsing through a mobile you need everything to be distinct and to have its own space for my fingers to press ( actually my fingers do it well with 28px in mobiles but either my fingers are slim or..... as I wrote apparently most people NEED SPACE)

The non critical CSS way has nothing to do with what space you leave in elements. NC (non critical files) usually meddle together through a minify process and then served above the content. In that sense its essential to differentiate what is critical CSS and what is not in a web app .

[gentlemedia]

The non critical CSS way has nothing to do with what space you leave in elements.

Yeah, obiviously I wasn't reading the question good enough, I read 'removing whitspace' and I assumed Dani was minifying and optimizing her CSS :)

Nonetheless I agree with you that it's quite obvious that there needs to be more space between at least you clickable/tappable elements on touch screens.

Regartding the showing as much as possible or all that important content above the fold... I think it's not a big thing anymore (unless you talk with marketeers, that want to push their ads above your content). People are now used to scroll thanks to Twitter, Facebook, etc. and story telling layouts or pages that are laid out following the AIDA model are common tactics for long pages as well.

[rproffitt]

To me, this smacks of code style (wars?) Maybe folk continue to debate code style (well, yes they do) but why not let a robot do this?
http://codebeautify.org/css-beautify-minify for example and move on to the next thing.

It was not fun at one job where the lead was replaced and demanded that all code meet his choice of standards. In that case it was his call that all code adher to the one true brace style. https://en.wikipedia.org/wiki/Indent_style lists 9 styles and for me, there has never been a project where style paid off.

I'm not writing there should be no style at all. I'm writing that this will be a job for robots.

[gentlemedia]

why not let a robot do this?
http://codebeautify.org/css-beautify-minify for example and move on to the next thing.

But you still have to copy/paste back & forth :)
Setting this uo with a task runner like Grunt or Gulp is better, so that this is done automatically for you (on the background) if you deploy your CSS to the live server.

[jkon]

Actually not , every operation / css namespace has its own two files , the e.g. cart.css and the nc.cart.css what minify does is minifying the non nc.* files and putting them in a gzip file , that it does with the nc files as well. So my application has all the css files used in the development and as well two files .css and .nc.css (both in gzip format, and also without) . When it is time to serve the content the main controller instruct the browser to load the non nc.css inside the html and after all the content is being loaded the .nc.css is being loaded as well through JS.

In development I have X amount of files , each one for its own reason , in productions those files are merged in nc and non nc reason.

(non nc means ... non Non Critical ... that means critical .. ;) )

[Dani]

Jkon, I do something similar. I have four javascript files:

critical for members only
critical for everyone
deferred for members only
deferred for everyone

Then, we combine, minify, and cache versions for each individual member group (each member group has different permissions). You're served the version for you based on your group (i.e. a moderator, etc.) since some groups have additional functionality that others don't. This way a regular member isn't wasting bandwidth downloading all of the moderation AJAX stuff.

[jkon]

Dani I must admit that you impressed me with your answer (you don't have +1 hehehehe). Just some thoughts , I will refer to Google and the practices it promoted through page insights and the best results I have seen complying to those in search. I don't agree 100% with Google suggestions (in fact neither Google seems to agree to itself some times) but over important issues things that I first thought that was nonsenses when I implemented those I realize that had more good side effects than only to score good in Google search results.
I am logged as a user in Daniweb , and you loaded 4 css files , that are in the head of your html . Remember that normal browsing process requires those files to be loaded before the rest of the HTML will be processed. Why have you those 4 CSS files ? Couldn't those being combined ? The resources/css/6-487.css is not properly minified (all comments are inside)?
None non critical CSS loaded after the page was loaded. So you haven't separated the critical from non critical parts of your CSS.
And here is something that I don't like but page insights insist that is important , the critical part of your CSS should be inline. Of course you can do it dynamically (also I do it that way) from the minified version of critical CSS for each group.
After the page is loaded you can then load the non critical CSS. The non critical CSS is usually the heavier part and it has to do with UI interactions and more.
Page insights makes the distinction of ATF (above the fold) and rest CSS. But if you consider your site an app you can't really differentiate ATF but you can surely identify critical from non critical CSS.
JavaScripts files should be loaded after the page is loaded. So the only JS that has meaning is one in the end of the page registering an event in window.load that will load the main JS file . Of course with JS the same rules apply , minify , differentiate. Then that JS file will load the non critical CSS.
When I first implemented that architecture I did it solely for Google shake , but now I can clearly see gains from it , I can change JS and CSS really easy based on the devise and the group of the user.
Dani I think you should also get page insight seriously e.g. https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fwww.daniweb.com%2Fprogramming%2Fweb-development%2Fthreads%2F507415%2Ftight-css its not only the critical not critical CSS part there are many many many others.