CSS optimization

Justin Obara obara.justin at gmail.com
Fri Jun 10 13:46:35 UTC 2016


I believe CSS Purge is really a set of guidelines and CSS Stats is an
analysis tool. I don’t believe that they do any automatic optimizations.
They are just things to help you construct yours better.

Here’s an example of running CSS Stats against build.fluidproject.org
http://cssstats.com/stats?url=http%3A%2F%2Fbuild.fluidproject.org&ua=Browser%20Default


And here is an example of how they reduced unsplash.com’s score from 252 to
61. Including a file size drop from 114KB to 6KB.
http://www.csspurge.com/unsplash.html

For things like our websites, we may want to explore tools to strip out
styles that we don’t use, particularly from the frameworks we employ. It
might also be useful to see if we could do a custom build of Foundation
that doesn’t include the line-heights, but I’m not sure if this is
possible. Considering that Foundation is something that we don’t actually
“ship” with Infusion, these kinds of optimizations aren’t too unreasonable,
provided it doesn’t add a lot of maintenance overhead ( e.g. when upgrading
Foundation ).

Thanks
Justin



On June 10, 2016 at 9:29:42 AM, Hung, Jonathan (jhung at ocadu.ca) wrote:

I think in general this is a good idea. I know there are instances where we
have very long nesting of CSS rules which can be simplified.

However I wonder how such tools deal with cases where the CSS may be
identified as sub-optimal, but was actually done on purpose? For example,
we use Foundation in a few of our projects. Foundation specifies it’s own
line-height which prevents UIO’s line-spacing adjuster from working
properly. So we often have to use something like this in our
implementations to fix that:

/* override foundation, so UIO's line-spacing will work */
.docs-template h1, .docs-template h2, .docs-template h3, .docs-template h4,
.docs-template h5, .docs-template h6,
.docs-template p,
.docs-template table tbody tr td,
.docs-template table tr td,
.docs-template ul,
.docs-template dl {
line-height: inherit;
}

If you look there, you will see that the “tr td” rule is styled twice. This
would be identified as being inefficient, but is needed to override the
effect’s of Foundation’s line spacing. How would something like CSSPurge
help in that case?

- Jon.

---
Jonathan Hung, Inclusive Designer
Email: jhung at ocadu.ca<mailto:jhung at ocadu.ca>
OCAD University
Inclusive Design Research Centre


On June 10, 2016 at 8:03:10 AM, Justin Obara (obara.justin at gmail.com<mailto:
obara.justin at gmail.com>) wrote:


I’m not a CSS expert, which is partly why I wonder if our CSS is as clean
as it can be. I’m sometimes worried that we get into the case where we
provide overrides for styles, but a simpler set of styles in general could
have provided the desired effect in a more straightforward manner.

Recently I came across CSS Purge<http://www.csspurge.com>, which has
inspired me to think about this again. To that end, I’ve filed FLUID-5195<
https://issues.fluidproject.org/browse/FLUID-5915>. I’m hoping that we’ll
be able to tackle this for the Infusion 2.0 release. We have more tools and
better browser support for CSS at our disposal today than we’ve had in the
past.

Please feel free to contribute ideas of where and how we can improve on
this.

Thanks
Justin

_______________________________________________________
fluid-work mailing list - fluid-work at lists.idrc.ocad.ca
To unsubscribe, change settings or access archives,
see http://lists.idrc.ocad.ca/mailman/listinfo/fluid-work
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.idrc.ocad.ca/pipermail/fluid-work/attachments/20160610/cc4d637b/attachment.html>


More information about the fluid-work mailing list