Back to my obligatios after holidays, it is always good to have new challenges, and this year, I’m decided to go slowly. I am always running, and some time, it is good to have a break before going on. For today’s entrance, this is an advice, because I encaurage you to spend one or two hours studying HTML and CSS Style guida from Google, a few tips that will be very helpful if you are a web developer (or you hace to write HTML and CSS code).
Style guides are neccesary
This is not the first time that I write about styles guides. Here is my Python and Javascript entrances realted to style guides, and today it is time for HTML and CSS, by Google.
The main reason for applying style guide has to be with clean code, and also, following common rules is a good way when sharing code. When the time pass by, following some rules has advantages, and like it or not, some time you need to fix or update code, and the cleaner, the better. For you, and for your mates (if you work on a group).
Google HTML and CSS style guide
You can find it here: https://google.github.io/styleguide/htmlcssguide.xml?showone=Optional_Tags#Optional_Tags, but the next tips are a small extract of them:
- Omit the protocol from embedded resources (omit http or https when writting URLs)
- don’t use tabs, but 2 spaces (in Python 4 spaces)
- Always use lowercase
- Remove unnecesary write spaces
- Use UTF-8 (no BOM)
- Remove trailing white spaces
- Mark todos and action items with
TODO - Use HTML5
- Use valid HTML where possible, also according to its purpose
- Omit type when loading CSS and Javascript files, if possible
- Use a new line for every block, list, or table element, and indent every such child element
- When quoting attributes values, use double quotation marks in HTML and ese single quotation marks for attribute selectors and property values in CSS
- Use valid CSS where possible and meaningful or generic ID and class names
- Use ID and class names that are as short as possible but as long as necessary (in CSS)
- Omit unit specification after “0” values and leading “0”s in values. Instead of 0.8, write .8
- Use 3 character hexadecimal notation where possible (instead of 6)
- Prefix selectors with an application-specific prefix
- Avoid user agent detection as well as CSS “hacks”—try a different approach first
- Use a semicolon after every declaration in CSS
- Use a space after a property name’s colon in CSS
- Use a space between the last selector and the declaration block
- Separate selectors and declarations by new lines
Although there are a few tips, I encaurage you to spend some time reading the guide and put into practice!!
My experience using style guides
Maybe you can think of them that it is a wasted time spending a few hours in learning these guides, but I am positive about style guides. My experience is positive, and now, I write clean code, named variables, visibility, and it is not an extra work related to the benefits.
If you don’t use them, you’re ready to go!
Have a nice day!