Giftern Note #3 —About HTML & CSS Formatting

Ok ok, I know I said we will talk about JS this week. But I feel like I should talk about what I learn every week. This way, I can see how I improved/what I learned as each week goes by. I will try to go into as many details as possible, so I can refer back to this in the future, hehe.

So, the decision to write about this topic is because I pushed my first string of code onto the server (will not go into details on what I wrote, but it involved HTML, CSS and JS). After my code was pulled by our lead Front-End — Roxy (Roxy, you’re featured! yay!) — , Roxy decided to sit me down and talk about code formatting…

Code Formatting 101 With Roxy

Roxy referred me a lot of code formatting docs. These docs are written by various developer who was inspired by style guides of Github and Mark Otto (Director of Design at GitHub).

Here are the guides:
http://juanitofatas.github.io/code-guide/*
https://github.com/styleguide
https://github.com/airbnb/css
https://github.com/necolas/idiomatic-css

*This one is in Traditional Chinese

Basically, the main idea of these articles is:
“It doesn’t matter how many contributors are writing the same project. The resulting code should appear like it was written by the same person.”

Some ideas are….
1. When formatting code, use soft tabs (two space bars) to indent code. By using soft tabs, code will align in almost all code editors.
2. Use double quotes instead of single quotes.
3. When writing HTML markups, the attributes should be listed in this order:
class
id
, name
data-*
src
, for, type, href
title
, alt
aria-*
, role

<a class=”cute” id=”meow” href=”#”>I’m Cute</a>

4. Avoid writing HTML markups in JavaScript.

You can read the full list of suggestions by clicking on the links above.


Even More Code Formatting With Roxy

After reading my code, Roxy and I went into discussions of HTML & CSS structure…

Picture a website as a house. HTML is the structure of the house. CSS is the decoration of it. JavaScript is the functionalities of the house. Think of JS like lights, pipelines, and gas…etc

If your HTML and CSS is not designed properly and the foundation is buggy. Then when you want to install pipelines and lighting chords (JS), it would be extremely messy. It would waste a lot of energy and efficiency.

Let’s go into how a house it built!

The main things to remember:
1. Avoid !important
2. Don’t use z-index and position: absolute; that much

But why?

Because position and display basically determines the layout of the webpage.

Website design is like building blocks. You want to build it from the bottom to the top. Using position: absolute; and z-index are basically building the structure backwards!

Position: absolute; disrupts the natural order. You’ll have to write a bunch more CSS in order to get the element you want to control into the place you want. (But there are always exceptions when design is involved.)

So use position: relative; as you code.

But what if we need to use z-index?

We need to create a spreadsheet of z-index and where it is used. z-index can go from 0 to infinite. You can’t just do something like:
.menu{
 color: pink; 
 border: 0;
 z-index:999;
}
Because you never know when you want something to cover your .menu class. So go and create that spreadsheet, you will have a clear view of which value is assigned to which.


Final note for this entry, in order to keep your code clean…

Don’t use JavaScript to manipulate existing CSS, but rather use JavaScript to link elements to new CSS class. This way it is much easier to manage code.

That means:

Don’t write this:

document.getElementById("p2").style.color="blue";

Instead, write this:

document.getElementById("MyElement").classList.add('class');

Cya all next week, I have more docs I need to read :)