Wednesday, May 02, 2012 at 8:46 AM
Webmaster level: AllGreat code has many attributes. It’s effective, efficient, maintainable, elegant. When working on code with many developers and teams and maybe even companies, great code needs to also be consistent and easy to understand. For that purpose there are style guides. We use style guides for a lot of languages, and our newest public style guide is the Google HTML and CSS Style Guide.
Our HTML and CSS Style Guide, just like other Google style guides, deals with a lot of formatting-related matters. It also hints at best practices so to encourage developers to go beyond indentation. Many style guide authors know the underlying motivation from the question whether to describe the code they write—or to prescribe what code they want to write. Not surprisingly then, in our HTML and CSS style guide you’ll find both (as much as you’ll still find a lot of different development styles in our not entirely small code base).
At this time we only want to introduce you to this new style guide. We hope to share more about its design decisions and future updates with you. In the meantime please share your thoughts and experiences, and as with the other style guides, feel free to use our style guide for your own projects, as you see fit.
34 comments:
Recommending to omit optional tags (even if you mark it as "optional") is going a bit too far.
The rest is great! (That means I've been doing it forever... :-) )
thanks for info :)
Why are a bunch of closing tags missing from examples? Are closing tags unnecessary now?
Also, "Written by Jens O. Meiert, S" currently 404's to a G+ sandbox link.
I like this style guide, but have a couple questions so far:
1) I am not sure I agree with Francesco about recommending to omit optional tags, but I find that in some of the 'recommended' examples they have not been omitted... e.g. HTML Formatting Rules has a closing < / p > element (note: I added whitespace so it would display).
This seems to be directly contradictory to what is stated in Optional Tags.
2) Leading 0s: While I understand that nothing is obviously going to save memory over an additional 0, I can't imagine this type of notation being accepted by a mathematics teacher, or professor. I am not sure I understand the significance of this recommendation.
3) For CSS Meta Rules rather than "...group style sheets sections together...," I think it should state, "...group style sheet sections together..."
Thanks for the info, but when will we see a valid code for pages by google. Even this page has 142 Errors, 216 warning(s), before I commented? :)
I like this style guide, but have a
couple questions so far:
1) I am not sure I agree with
Francesco about recommending to
omit optional tags, but I find that in
some of the 'recommended'
examples they have not been
omitted... e.g. HTML Formatting Rules
has a closing < / p > element (note: I
added whitespace so it would
display).
This seems to be directly
contradictory to what is stated in
Optional Tags.
2) Leading 0s: While I understand
that nothing is obviously going to
save memory over an additional 0, I
can't imagine this type of notation
being accepted by a mathematics
teacher, or professor. I am not sure I
understand the significance of this
recommendation.
3) For CSS Meta Rules rather than
"...group style sheets sections
together...," I think it should state,
"...group style sheet sections
together..."
----
Free Open Link Directory - http://www.Linked-Out.tk
Why are we encouraged to "Separate selectors and declarations by new lines."?
I always compress my css before putting it on a live website, which leaves the css rules all on one line. Why does it matter?
@Jens O. Meiert
This question from SEO guy! Best HTML & CSS structure can give rocket speed in organic performance. That all we know. But, I want to workout on limitation and implementation on website with prompt manner. Is there any tool which enable SEO guys to optimize HTML & CSS code without help of developers? So, SEO guys can design action plan to improve it as much as they can. What you think about it? I'm working on eCommerce website (Vista Stores) & such a big structure to optimize each and every elements and attributes. I recommend that, Google add some more features in Google webmaster tools about HTML & CSS which describe page level health and how to improve it.. BTW: Thanks for sharing on this subject because, I'm dealing with similar issue on my website.
Also interested how affects compressing css and js files on live websites? Is it ok?
Why should Google care if my CSS selectors are on one line instead of 5? If these rules are to improve overall site speed then how does making the file bigger help?
I think CSS is easier to read on one line, yet the arbitrary rules Google implies state that that's a bad idea even though it's personal preference.
I'll follow these rules when this page is compliant with w3c guidelines...
CSS: Sorry! We found the following errors (69)
HTML: 152 Errors, 226 warning(s)
Tmhrtwg said...
Why are we encouraged to "Separate selectors and declarations by new lines."?
I always compress my css before putting it on a live website, which leaves the css rules all on one line. Why does it matter?
You don't edit your compressed code, though, do you? These aren't suggestions for how your code should look to the public; they're suggestions for developers and designers to help increase the maintainability of their code.
Elev8 said...
If these rules are to improve overall site speed [...]
Where do these suggestions say anything about site speed?
I forgot to actually comment on the guidelines. Heh.
I've been doing most of this for quite a while now, but here some criticisms I have:
1) Unstated assumption: A number of these suggestions seems to be made with the unstated assumption that you'll be running your HTML and CSS through some deployment process that strips out everything that's unecessary for rendering. For example, "Mark todos and action items with TODO". I would never put TODO's in code that could be viewed by the public. It's useful internally, but the public doesn't need to know about it.
The "Indent by 2 spaces at a time" suggestion seems based on that assumption, too. Using spaces instead of tabs significantly increases file sizes. That is, of course, unless you strip out all unnecessary whitespace during deployment.
2) "Indent by 2 spaces at a time": I understand the visual consistency aspect, but I feel that individual developers should be able to view the code they're working on in a manner that is most comfortable for them. Since most text editors allow you to adjust tab settings, using tabs allows for this individual preference without negatively impacting others.
On a personal level, I also find two-column indentation doesn't provide me enough visual distinction between levels of code.
The new coding guidelines for HTML and CSS will help lots to the developers to manage sites very effectively.
Thanks for great post and guidelines
Great identation stuff for precompiled html and css (the text files devs are working on.)
However all my pages are served optimised, which means that I have my templating engine remove all identation and markup, spaces and tabs and output all html on one line when possible to save bits.
Hmmm...can't read it from Android device...
It should be made clear that this is not prescriptive. It is just what it says it is: a style guide for collaborative projects, so that everyone's code can be more easily worked on by everyone else.
ಥ_ಥ
Thanks for great post and guidelines
www.statistation.blogspot.com
I don't agree on using spaces instead of tabs. With tabs I can choose (on my IDE) if I want to see code indented with 2 spaces length, 4 spaces length, 8, etc.
It's a matter of readability. Anyway, after compressing the code, 2 or more spaces will be deleted.
Fran
www.fmvilas.com
This is great info for people who are not actually aware of HTML and for who are playing around since many years.
But this piece of information kept me busy and thinking for 2 days, if we consider and follow this guidelines:
A. Is it good for end users?
B. Is it good from SEO perspective (will this help to increase rankings somehow)?
C. Is it good for anything else?
Feedback from experts will be highly appreciated. Thanks in advance for your time and guidance. Cheers.
No offence, guys, but how do you dare to provide HTML & CSS guidelines when your own site does not have a valid markup? Please walk yout talk first, provide guidelines later.
i want blogspot make easy to use on mobile phone... or maximal support handphone. Thanks
hm...interesting
I think this is interesting because Google is helping us understand more factors that can affect our rankings.
If you prefix TODO: with unique characters, you can create other related tags and easily search for them. For example, ::TODO: ::QUESTION: ::DEVELOPMENT: and ::NOTE: can all be found via one search for on the characters "::".
I also agree that you'd shouldn't put items like this in end user code. They're more useful in comments in server side code.
The question from SEO guy! Best HTML & CSS structure can give rocket speed in organic performance. That all we know. But, I want to workout on limitation and implementation on website with prompt manner. Is there any tool which enable SEO guys to optimize HTML & CSS code without help of developers?
The question from SEO guy! Best HTML & CSS structure can give rocket speed in organic performance. That all we know. But, I want to workout on limitation and implementation on website with prompt manner. Is there any tool which enable SEO guys to optimize HTML & CSS code without help of developers?
Who wrote this recommendations?
This man have experience at web development?
Seems to no...
Even my grandma read w3.org, and: use Tab to indent (1 byte vs 2 bytes); closes open tags; compress CSS and JS sourcess! =)
My site have valid css and xhtml but is not seo...why?
One of my favorite references for auditing websites.
I still feel that generally providing more information to search engines should be viewed as a good thing.
There's a sense that these recommendations contradict that.
Message to google webmaster
We are Acute Trek Pvt. Ltd. from Nepal and we create our website on 2008 www.trekshimalaya.com and here we have problem one of the agency call Moon Light Nepal Trekking & Adventure Tours Pvt. Ltd. And website here http://www.moonlightnepaladventuretours.com create on 2011 they put our agency name here http://www.moonlightnepaladventuretours.com/helicopter_tour.php sale business by them-self but we try contact them but they didn’t want to be in contact. I hope you have record of google listing which date who is earlier they or Acute Trek, so can you please help us kindly to remove from google listing because we lost our business it is totally harmful to us when they copy our agency name to put other website. We expect your kindly sooner.
Thanks for your kind and co-operation and hope to hear from you soon.
Your Sincerely
Ishowri
this is really complicated.
How do I decrease the height of my blogger site so there is no scroll? All I see are width adjustments.
Rick
Post a Comment