Learning Less – My LESS, CSS, and HTML reference

Each time I sit down to do a piece of front-end web development, I find myself revisiting the syntax of CSS and LESS, as well as double-checking on HTML elements, then trying to remember when I precede a selector with #, &, >, ::, Caps, etc…  In short, I always spend a bit too long getting things straight in my head (again) – although, arguably, it may well be as much procrastination as anything else!

This post is my personal documentation for next time…

I am building our business website, starting from the excellent ng Boilerplate, by Josh D Miller, which includes the amazingly helpful Bootstrap 3.  So, this determines a bunch of my development toolset.

But I do want to avoid embedding Bootstrap directly in my html.

In terms of workflow, I know what role I want this site to play (or purpose), so I use the initial structure that Josh provided in his ng-Boilerplate installation to add some of the bare bones content.  Next I’ve identified the types of interactions I want to use for the feel of the site, and I also have some thoughts on the typography and colours to bring things to life.

Where do I start?   What goes where?  What do I change?  What do I create?  What do I reuse?  What do I ditch?  And how do I do all of that?

Mostly I will do this in LESS.  But that means I need to know the respective roles and notations for HTML, CSS and LESS.  If I can explain it, I have a better chance of doing it!

HTML – my understanding

HTML elements are the tags used to structure a web document, and to organise the content therein.  Given HTML is the foundation, it is essential to know about the HTML elements that are available/valid in HTML5.  The Mozilla Development Network is a good reference for this.

While HTML elements can be styled using attributes (Name and Value(s) pairings), it’s hard to imagine building a real web document just using HTML.  It’s all a bit of a jumble…

So instead of trying to jumble content and styling together in the HTML, which could look like the following:

<div>
  <p style="font-family: Arial, serif; font-size: 20px; color: white; background: darkslategrey">My Business Heading</p>
  <p style="font-family: Arial, serif; font-size: 12px; color: black">Some paragraph text blah blah blah</p>
  <p style="font-family: Arial, serif; font-size: 14px; color: #0A1B2A; background: #F5BCA9"><strong><em>Some important message</em></strong></p>
</div>

my HTML could be reduced to:

<div>
  <p class="brand-heading">My Business Heading</p>
  <p>Some paragraph text blah blah blah</p>
  <p class="key-message">Some important message</p>
</div>

if I use CSS (Cascading Style Sheets).  Simply pull out the styling declarations into a CSS,  such as:

.brand-heading
 { font-family: Arial, serif;
   font-size: 20px;
   color: white;
   background: darkslategrey;
 }
p
 { font-family: Arial, serif;
   font-size: 12px;
   color: black;
 }
.key-message
 { font-family: Arial, serif;
   font-size: 14px;
   font-weight: bold;
   font-style: italic;
   color: #0A1B2A;
   background: #F5BCA9;
}

So what is CSS…

CSS – my understanding

CSS is the styling language that all web browsers understand – although some browsers use a slightly different syntax for a few of the property:value declarations!

To display a website,  HTML and CSS are combined to generate an integrated mark-up which is the DOM (Document Object Model).  The browser understands and uses the DOM to present the page.  The DOM is also pretty easily understood by a human (assuming knowledge of HTML elements and attributes) – but it would be a nightmare to try and maintain a website just using the DOM.

CSS lets me abstract the styling of my website away from the HTML   I can combine CSS declarations (i.e. style properties and values) to CSS Selectors, and then add selectors to my HTML.  My selector could be an HTML element (e.g. h1, p) or it could be a made-up word that I want to use to represent a style, which I can then assign to an HTML element – e.g. I can create a CSS Class selector called “key-message”, and then simply add that class to an HTML p element, so that this particular paragraph stands out.

CSS is to websites – as Styles are to MS Word documents…

If you’ve ever written a large document on a word-processor, say a Corporate Business Proposal, you have probably experienced the pain of trying to fix up all the styles in that document as you pull everything together just before the deadline!  This is compounded when you have multiple authors who all do things their own way.

I find this to be a really helpful analogy to help me think about my CSS.

Before I create my document/website, I probably want to define ‘styles’ for all the basic things that I am likely to include in my document’s structure and style.

I may include headers and footers, headings and body text, a Table of Contents/Menus, various types of lists (maybe numbered and/or bulleted), tables and any other objects I am likely to need.  There will be more, but it’s a great idea to start with a core set of styles.  It’s also a great idea to ‘inherit’.  For example, I will probably use just one or two fonts in my document.  I don’t need to repeat that font for every style that applies to text.  I just apply it to “body” and then all other styles start from/inherit body.

As with a document, I can create my own CSS styles, or I can start with a template. Think Bootstrap…  But, just like writing a document, it is really important to understand how styles work so that if I start with a template, I customise them without conflicting and/or duplicating the existing styles!

Now that I get this concept – CSS seems much easier.  Just add syntax, and practice, and I will become better at architecting my stylesheets!

Of course I have to be familiar with the HTML elements, before I can sensibly create CSS.  I need to know what properties and values are applicable or appropriate to make sensible CSS selectors. There are loads of excellent sites out there to help with this.

Here are my favourite CSS web resources:

  • CSS Tricks has an almanac of CSS selectors and properties, as well as lots of posts on various CSS topics – lots of CSS goodness.
  • The Mozila Development Network has a great section on CSS, which has a tutorial with easy to follow explanations, and a good CSS reference.
  • I also found that HTML Dog really helpful as a tutorial on CSS mechanics, including syntax and usage.
  • CSS Guidelines is a brilliant Style Guide, providing advice on how to develop scaleable and maintainable CSS.
  • And for the full list of selectors, W3 org is great.

CSS – it’s all about Selectors and Inheritance

A few key points I need to remember about CSS follow, but I love Chris Coyier’s post on Little CSS Stuff Newcomers Get Confused About as a great starting point.

Inheritance:

Broadly speaking, the styles cascade to all elements nested within the element that I style (hence the cascade in CSS!). There are exceptions, and specificity adds to the confusion.  But this is only as good as my CSS organisation and architecture!

Selectors:

Selectors are the keywords that glue the CSS to the HTML, via CSS rule sets.  When my CSS Selector appears in my HTML, the DOM knows how to style that piece of HTML.

I can declare a single Selector or multiple Selectors in a rule set.  I can even declare a rule set that is based on combinations or relative positioning of Selectors to each other.

There are many selector types, (officially listed at W3C). Or see Smashing Mazagines’s article on taming advanced css selectors.

Just to help my understanding, I’ve listed a few of the key selectors, below, along with the syntax (symbol) that helps me know what type of selector is contained in a rule set:

 Selector types

Different types of selectors have inherent behaviours that tell the DOM how to prioritise and what to inherit (or not).

It is critical to understand what each of the selector types do, so I can determine what types I want to employ in different situations, without creating specificity nightmares… This is a talent that takes time to develop, and which is often learned at the school of hard knocks!

HTML Selectors:

Syntax:  html-element { property:value; property: value; } html-element could be p, body, h1 etc…
About:  This selector will inherit whatever settings I assign, whenever my HTML uses this element.
Example: h1, h2, h3 { font-family: Arial; color: red;}

Class Selectors:  .

Syntax:  .my-class { property: value;  property: value; } (repeating the property-value statements)
About: Classes are my favourite selectors because these can be reused to style lots of different HTML elements, and I can apply multiple classes to one element.
Example: .myBrand { font-family: Roboto; color: green;}

Id Selectors: #

Syntax:  #MyImportantId {property: value;  property: value; }
About: Use very sparingly, and only if it is the only option!
Ids can only be used once in the HTML – so once only for each page in this project.
Ids can only be used alone, so I can’t combine a class and an Id on the single element
Ids should only be used if you have a specificity issue that cannot otherwise be resolved, because Ids are king relative to other selectors – they will take priority regardless of inheritance.
Example: #my-web-banner { font-size: 2em; color: #F2A333; background: yellow; }

Pseudo Selectors:

Syntax: selector:pseudo_class { property: value; }
About: These are a keyword added to selectors that specifies a special state of the element, such as hover for a link (a:hover)

Pseudo Elements:  ::

Syntax: selector::pseudoelement { property: value; }
About: Allow you to style certain parts of a document, e.g. ::before and ::after.

Child Selectors:  >

Syntax:  selector > child-selector { property: value; }
About: Allow you to style an element, but only the child that is directly nested as per the selector.  NB the style won’t cascade to any further nested elements – the scope is limited to the child only.

If I want a descendant, rather than the immediate child, I simply leave a space between the selector and the child selector.

Adjacent Selectors+

Syntax: selector + selector-targetted { property: value; }
About: Allow you to target an adjacent sibling of an element, essentially, something immediately following something, and only that adjacent item.

Universal Selector: *

Syntax: * { property: value; }
About: As it sounds – it sets everything!

Attribute Selectors:  [  ], ^,  $, *

Syntax: [attribute] { property: value; }
About: Attribute selectors match any elements based on the presence of the target attribute, or the exact or partial match of an attribute’s value.
Additionally:

[attribute^=something] will match the value of an attribute that begins with something.

[attribute$=something] will match the value of an attribute that ends with something.

[attribute*=something] will match the value of an attribute that contains something, be it in the beginning, middle, or end.

Combining selectors – nuances in meaning

As CSS Tricks reports, white space, full stops, commas and combinations of these can result in very different behaviours…

For example, the difference between a descendant and a qualifier:

.container div { }  => a descendant div that has a parent container anywhere higher in the tree
 vs.
div.container { }  => a div that is qualified as having the class="container"

For more details from CSS Tricks that really help get my head around syntax see:

what’s the difference

multiple class id selectors

A final note about semantic CSS

Semantic CSS is a point that is reiterated ad nauseam – for good reason…I understand semantic CSS to mean:

Use a name that reflects the purpose of the element, not one that describes the styling.

The name of all CSS selectors should reflect the purpose of that specific CSS declaration block.  In other words, use the “why” of each selector, not the how (or what) that CSS declaration group is doing.

For example. A selector called key-message is semantically named: when I read the HTML, I can understand why that element is useful to me.  I.e. I know the purpose of that style is to present a key message that stands out from the other content on the page.

Had I instead used a name that described the style itself  (e.g. bold blue heading), I have made my CSS a little less useful. If I decide to change my site, for example changing how I style important messages on the page from Bold and Blue to become Flat, Thin, but Big and Aqua, – the HTML is going to have to be updated with a new name (or else be misleading!).  While not wrong, semantics can really help decouple the HTML from the stylesheet.

Semantic names remain logical even if the presentation of the page changes.

While it seems a bit pedantic, and it did take me a while to get my head around what being semantic actually means, I have jumped on the ad nauseam bandwagon because I believe this is a key part of creating maintainable CSS (and LESS) – minimise coupling!

Doing LESS to manage my CSS

While CSS is quite powerful and could easily work for my website development, there are a few tools available that help reduce the repetition that often occurs in CSS, by introducing a handful of useful programming techniques, such as variables, nested classes, and functions (with or without parameters).  Because I’m using ng-Boilerplate and Twitter, LESS is the tool that I am using.  I’ve read that SaSS is really good, but for now I’m all about LESS (LESS = Lean CSS).

The good news for me, I can write CSS as my LESS.  When I am ready to deploy my website, all my LESS is actually expanded out into CSS.  LESS uses the exact same syntax as CSS.

I think of LESS as a tool that simply lets me abbreviate a bunch of CSS.

The features that I really like include:

Variables:

Essentially these are constants, but LESS calls them variables.  They are defined once and then referenced in our LESS as required.  Ideally, I document my variables together, perhaps split into files based on the types of variables, but for this site I don’t see that I will have that many!

Variables are a great place to list out the specific values I want to use in my rule sets.  Common examples are fonts, colours, sizes etc.

Syntax: @my-variable: value;

Usage: I can use my variable in any declaration, instead of repeating the absolute value every time I have a rule that needs the value.  So instead of writing “#2E64FE” in lots of places, I can use a variable that is named to semantically represent why I want blue, e.g. @brand-primary-color. Then, if we change our branding, even just the tone of our brand, I only need to update that variable.  Pretty awesome!

Operations:

With my variables, I can use operatives to create new variables, eg: twice the size, 10% lighter, or even by adding two colours together.

Mixins:

These can be really simple, with one rule set including another, plus some new declarations.  Or they can be quite complex and function-like, using parameters and even return values. See the descriptions at the LESS site if I want to use these – no need to paraphrase the usage here!

A simple mixin, for example, might define a class selector to apply some basic text styling that all my document headings will use.  Then, I could create the specific selectors for each of my 4 or 5 different headings, by including my generic heading selector plus any other declarations that are unique to each heading.

The real value of a mixin is for a chunk of styling that I expect to reuse a lot. There are more LESS Mixin libraries becoming available for universally useful style rule sets, for example border-radius (which needs multiple syntax for cross-browser compatibility).

See LESS.org for more on Parametric Mixins, Mixins as Functions, Passing Rulesets to Mixins, and Mixin Guards (aka If, Then,Else).

Nesting:

Less gives you the ability to use nesting, so I can group chunks of styling together, without having to repeat the outer selectors.
For example, the following CSS could be nested in LESS:

CSS
  #my-header {
   font-family: Arial, serif;
   font-size: 20px;
   color: white;
   }   
  #my-header .navigation {
   font-size: 12px;
   }
  #my-header .logo {
    width: 300px;
  }

Could become LESS

  #my-header {
    font-family: Arial, serif;
    font-size: 20px;
    color: white;
    .navigation {
      font-size: 12px;
    }
    .logo {
      width: 300px;
    }
  }

There is more good stuff that LESS can do, but for now this will get me off the procrastination chair and back to my website!

  • Check the official Open Source LESS website, tis very awesome.
  • For a helpful perspective on LESS workflow (with or without Bootstrap) see Erik Flowers’ really simple and helpful tutorial on Bootstrap 3 Less Workflow.
  • Excellent examples and explanations on the power of the ampersand from SLaks – now I get how to use “&”.
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s