IDs are Unique – But Why?

Ever since I started using CSS experienced programmers came to me saying my use of IDs was bad practice. But everyone so far has failed in giving me a good explanation of why. And it is very difficult for me to follow someone’s advice because of the “well, because IDs are unique” and “because I said so” reason.

Most recently I ran into the issue again when I drafting a landing page for my company recently and one of our frontenders told me that I used too many IDs which is bad practice. I still missed a solid answer to my childish – “but why?”. So this is when I decided to do my own research and after 2 or 3 nights of searching and reading I discovered not only one, but 4 explanations for creating unique IDs (meaning to have only one element on the page marked with that ID).

1. HTML Specs

One of the sites I was linked to revealed the HTML Documentation from W3C. This looks as intimidating and tiring as any other guideline, but it’s actually one of the most important documents to read and understand. If you know the specs you know how you can program your website as clean and as easy to understand for a browser as possible. And it’s clearly marked that

id = name[CS]

This attribute assigns a name to an element. This name must be unique in a document.

If you disobey the specs set in the documentation worst thing that can happen is that the browser won’t display your page correctly. And you know how all of the programmers love debugging…

The Documentation is for HTML4. The HTML5 documentation emphasises on IDs as unique identifiers for elements.

2. Change HTML with JavaScript

Another good reason to not use one ID for multiple Elements is that you can change the text of a document with javascript using the element’s ID. Now I still have to figure out how that works specifically and why I want to change a text with javascript instead of just changing the text inside the HTML, but I guess that will come in handy once you program dynamic websites and not just boring static ones like I do.

3. Use IDs to Create Anchor Tags

IDs can be used to link to a specific section of a page. Now if there are two or more elements on a page with the same ID – how should the browser know which one to link to ?

4. Specificity

Another good reason why you should be careful using IDs when styling a website comes in the biggest tongue twister in coding history (my coding history) – specificity.

Styles in CSS are differently weighted. Rules that are applied later in the document are applied first on the page: When you first define

div {
color: grey;}

and later in the css document

div {
color: green;}

the divs in the document will be green, not grey. So far so easy (why would someone style the same element differently anyways?).

Another way browsers weight CSS when displaying a page is by the position of the CSS itself. Inline CSS has the highest priority, followed by internal stylesheets, after that it will look into external stylesheets and if there are still some rules left to apply it will use the browser default settings.

And then there is specificity of CSS attributes and tags. And in terms of specificity, the ID attribute wins almost every battle. Specificity might not only be the biggest tongue twister, but also the most difficult to understand. Personally I like the explanation of specificity on CSS-Tricks the most. If you use the ID attribute you should be aware that it can override other styling elements which prevents your code from being displayed as you wish.

Very briefly summarised the specificity from elements is as follows: !important > Inline Styling > ID > Class > Element Reference.

While I’m still struggling to understand how exactly I should style a web page and what to consider when using which styling rule, I do understand what IDs are and why they should be applied carefully (and once per element per page!). I found a very useful rule of thumb from someone who explains specificity by using poker examples:

Put generic declarations first (body, a) to define the overall styles for the page
Override only those values necessary in the different sections with ID or class selectors (#navigation.a, .article)
Zero in on specific areas with additional ID or class selectors (#navigation ul.subsection a, #footer p a)

Other useful articles on the topic include:

Advertisements

Customising tumblr

I decided it is time for a new theme on tumblr. I found a nice one called “Lightweight”. The tags and dates are much nicer integrated, it features a mobile version, and I like the little icons on the left indicating what type of a post it is.

Nevertheless I need to do some customisations. Unfortunately tumblr doesn’t allow you to create a child theme so I’m just messing around with the main theme. To not get confused here are my changes:

Theme Options:

  • Changed link color to #006633
  • Set Background and border color to white

Edit HTML

  • branding h1
    • changed color to #006633
    • changed font to Optima, PT Sans, Arial, Sans-Serif;
  • branding h1 a: added font-weight: bold;
  • h4
    • deleted h4 from heading list (now it reads h1, h2, h3, h5, h6)
    • added h4 below that list: h4 {color:#888888; font-weight:bold; font-family:Optima, PT Sans, Arial, Sans-Serif; font-size:18px; clear:both;}
  • edited .post-content h3: {font: 22px/1.6 Optima, PT Sans, Arial, Sans-Serif; font-weight: bold;
  • edited #about img: added display: none;
  • edited #about p: changed font to: Palatino, PT Serif, Georgia, Serif;
  • edited p, ul, ol, dd, pre: added font-family: Palatino, PT Serif, Georgia, Serif;
  • edited .post-content img: deleted margin, padding: 10px, added float: left;
  • added class .imagecap {float: left; text-align: center; margin: 10px 15px 0px 0px; font-style: italic; margin-bottom: 10px;}
  • edited .post-type-text .post-content ol li: changed “Upper-latin” to “decimal”

Important:
– Always include class=”imagecap” when posting images
– Quotes might need a make-over

Finding the Right Colour

When designing a website choosing the right colours is one of the most important and most difficult parts. It’s good to remember that black, white, and grey are neutral colours which means they go well with everything. Complimentary colours are opposite to one another and create the highest contrast (think IKEA). If you’re just looking for a specific CSS colour code, I find these links helpful:

Matching Colours

For getting an idea about colour harmonies, this article explains it quite straight forward: http://dandyfashioner.blogspot.com.es/2009/09/art-of-color-what-colors-go-well.html (for matching clothes).

This article is a little more in-depth:
http://www.tigercolor.com/color-lab/color-theory/color-theory-intro.htm

And another one:
http://web.mst.edu/~rhall/web_design/color_mixing.html

The colour wheel:

color-wheel

Creating a Colour Palette

Once you understand the basic rules of how to match colours, creating a colour palette for your website becomes a little easier. There are also some great tools on the internet that help creating a nice color palette:

  • The nicest one might be that of Adobe Color CC. Based on your choice of colour and colour rule it spits out 5 different colours from the colour wheel.
  • Color Blender provides you with up to 10 colours based on 2 individually chosen colours.
  • Color Wizard works similar to Adobe Color CC but makes it a bit more fun to play with different colours

This article from Creative Blog provides more tools.

Finding a Colour Based on a Photo or Website

But what would you do when you find a website and you would like to know exactly which colour they are using? I had to translate a blog article and tried to semi-recreate the layout of their blog, so knowing exactly what kind of colours they were using was very important. Luckily, I found two tools that were extremely useful:

  • My mac books in-built Digital Color Meter
  • Color Hex

The Digital Color meter follows your mouse and shows the RGB colour it is hovering over on a pixel basis.

digitalcolormeter

Once you figured out the right RGB, you can go to Color Hex, type in the RGB (RGB followed by the number, so e.g. RGB 102 47 88) and the tool will provide you with in-depth information about the colour, including it’s CSS colour code.

Based on this I created a mock-up that looked similar to their original blog:

blog-copy

My Copy

Their original

Their original

The Code

The CSS code for colours is extremely simple:

  • {color: #XY;} will change the color of the text
  • {background-color: #XY} will change the background colour of the item

Background colours can also be gradient. It’s a bit tricky, but these articles have some pretty nice code examples:

This was the code I used, and it seems to work fine on the latest versions of Firefox, Chrome, and Safari:

  • style=”background:linear-gradient(#23689f,#54a8e5);”
  • style=”background:linear-gradient(#83939c,#ca9891 5%,#8e271b 45%);”

The percentage numbers mark colour stops. I haven’t quite figured out how they work and it is based more on trial and error than anything else.