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:

reset.css vs. normalize.css

Browsers are programmed to apply default values to elements on a web page whether or not any CSS is written. This helps render viewable HTML without any added styles. The only problem is, different browsers can’t agree on the default styles of elements and these inconsistent values then become part of your cascade.

In order to level the playing field of your cascade, you may use a set of “reset rules” to wrangle these browsers into line.  A clean baseline of styles across all browsers can save headaches later.

Eric Meyer’s reset CSS is widely used and referenced.

An alternate solution, normalize.css, is presented by necolas.

The main difference between them is that normalize.css preserves the useful defaults rather than flattening everything out and forcing you to re-declare default values you would have preferred to keep. Normalize also fixes bugs, which is outside the scope of reset.css.

Oli Studholme presents a comparison and concludes normalize.css is a better way to begin.

Me? I went with necolas as usual.

I add the normalize.css file using @import to the top of my global css file.  Strip it down as much as you like, although there isn’t a lot of bloat. Simply adding the normalize.css to the top of your global.css is fine, too. If I am using Bootstrap, there is no need since a version of normalize.css is included.

JavaScript

A decent place to start learning basic JavaScript for free is Codecademy. I also recommend the MDN.

Smashing Magazine, one of my favorite places to learn, has a helpful JavaScript Essentials page.

People rightfully rave about Douglas Crockford.

I wouldn’t stop there, however.

You’ll need to spend three to six hours a day over the course of several months and years to be serious about learning JavaScript. And even then, as you continue to learn, you’ll be amazed at what you didn’t know or what you misunderstood.

You’ll never stop learning if you’re really serious.

I have learned just enough to know that I need to refine my process. I still waste too much time being stuck.

I’m sure I could use better tools (I use Komodo Edit) but for now it isn’t Komodo that is holding me back, it’s my extreme reluctance to ask for help.

Getting stuck for a long time on one thing may be more honorable than always crying for help, but honestly, sometimes you just need a hand.

Fortunately, the JS community tends to be super helpful.  Who knows why? Maybe because they are cocky, or like to show off; maybe they have a crush on you. Or maybe they just want to pay it forward. The bottom line for me is this: as long as I have made my best attempt, I shouldn’t be ashamed to seek help.

Of course, there’s a flip side to seeking help. If you annoy your best resources by asking remedial things over and over or asking for help before making any attempt at all, then you’ll become toxic and annoying.

I hope to get cocky about code someday. I really do — at least just a little bit. My favorite sushi chefs tend to be conceited and it comes through in their work. A little swagger goes a long way.

I hope one day I’ll feel I don’t have time to waste being nice to plebeian supplicants pestering me with petty problems. I’ll answer them peremptorily with a riddle or a rebuke because I have more advanced students to help, more serious people to support.  They’ll quickly return to their keyboards, inspired and grateful.

Maybe by 2020 I’ll be a surly genius making speeches on the mountaintop but for now I’m just a wide-eyed pilgrim serving tea at base camp.

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.

CSS

css

CSS is easy, right?

CSS is a dark art. That’s about the best you can say about it.

To be honest CSS is a real drag. It destroys your mood and saps your confidence. Things that seem simple just aren’t. It takes way too long to get it right.  If you haven’t been frustrated or annoyed with it, you haven’t really tried it.

Still, there are a few ways to make it easier. Your best chance is to develop a methodical approach,  otherwise you’ll quickly find yourself chasing your tail like a neurotic puppy.

dog chasing tail

First, choose your tools wisely. I recommend Google Chrome with Dev Tools or Firefox with Firebug.

Next, find some tutorials and free online classes to get your feet wet. I recommend Codecademy because it helped me immensely and you can do a lot for free. Others include webplatform.org and w3schools.

Before writing CSS be sure to check your ego at the door. Some of the best CSS designers I’ve ever met come across as arrogant to the point of ridiculous, but most likely they are over-compensating for the devastating damage done to their egos while they were still struggling to learn it.

Cat-Rubiks-cube

How it feels working with CSS

CSS starts out feeling rather easy. Then you’re likely to get reckless and wonder why you’re having so many problems. Until you adopt the right tools and approach, CSS just makes you feel stupid, like a cat trying to solve the Rubik’s cube.

Here is a long list of resources for learning and referencing CSS: