LESS and SASS

SASS and LESS are CSS pre-processors.

What is a CSS pre-processor?

A pre-processor is a program that processes its input data to produce output that is used as input to another program.

A CSS pre-processor will allow writing clean CSS in a programming construct instead of static rules and it will output the result in clean CSS.

Advantages include: variablesnestingmixinsoperators and
functions.

Guru Chris Coyier writes about SASS vs. LESS and general musings on pre-processors on CSS-tricks.com.

Udemy also compares LESS and SASS.

Google provides a few notes about DevTools and working with CSS pre-processors.

For the cons of using pre-processors, check out Miller Medeiros‘ blog post.

Finally, here’s an epic YouTube Playlist on SASS related topics:

Sass styleguides

Fonts and Typefaces

A font is what you use, a typeface is what you see.

These days everything seems to trip me up. My thoughts just dart from one place to the next.  What’s the difference between a  font and a typeface? Do you spell web with a capital ‘W’? And then I click on something and *poof* my train of thought is gone.

Capitalization of “web” and “Internet”

Chicago now prefers web, website, web page, and so forth—with a lowercase w. But capitalize World Wide Web and Internet. 7.76.

Chicago Manual of Style

I just want to make sure my HTML and CSS templates are up to speed and here I’m hung up on capitalization and fonts.

Besides my ADD, the issue at hand is this: should I use @import in my CSS to load my fonts or just add them in the html as a link?

Google fonts is fantastic. I love the real-time analytics.

But I’m not sure how I want to use it.

Look! A shiny new thing! Typecast!

Stick to the issue: should I use @import?

The answer according to Guru Steve Souders is no.

Here’s why: using @import causes the individual css files to load sequentially, rather than in parallel.

There you have it.

Or will I need a Web font loader?

Web Tutorials

You can learn just about anything about Web development online for free.

For learning basic HTML, CSS and JavaScript, start at Codecademy. For me it was time well spent.

Other helpful general knowledge sites include:

Further Reading:

OOCSS and SMACSS — really?

A formalized methodology like OOCSS (Object Oriented CSS) or SMACSS (Scalable and Modular Architecture for CSS) represent my current best hope of making any real sense of this CSS crap. In other words, I’ve chased my tail enough.

SMACSS (pronounced “smacks”), by Jonathan Snook, a true guru, is in his own words:

…an attempt to document a consistent approach to site development when using CSS.

Why?

Because it turns out Guru Snook is not a masochist. Most probably — like me — he lost enough sleep having nightmares that turning off his nightlight would cause a power outage in three states. In a cold sweat he realized he needed a formalized approach to writing CSS.  Thus, he curated his thoughts as SMACSS, or:

techniques that can keep CSS more organized and more structured, leading to code that is easier to build and easier to maintain.

Thanks, Jonathan!  SMACSS is more of style guide than anything else, which gives you a methodology for building out your code.

My other best hope is OOCSS.

I came across Stubornella reading an article by Necolas about HTML semantics and front end architecture.  (Read anything Necolas writes, by the way. Just do it.)

Stubornella is Nicole Sullivan, and she’s six degrees of awesome.

The two main points of her OOCSS mantra are:

  1. Separate structure and skin
  2. Separate container and content

Here’s a good YouTube playlist to wet your whistle on OOCSS:

An advocate of combining the best of both approaches is yet another guru Shay Howe:

Choosing which methodology to use, if any, is completely up to you and what you feel is best for a given website. Generally speaking, a solid mix of both OOCSS and SMACSS works well, borrowing principles from each methodology as you prefer.

Shay’s free lessons on coding advanced HTML and CSS are an excellent place to spend time ridding yourself of the notion that you are a total clueless ignoramus web developer. The feeling may not last, though, so you’d better be prepared to come back a few times.