HTML CSS best practice

SimonTemplar

I'm looking for resources (online or books) to get to grips with best practice for front end web development. I'm not looking for something that teaches HTML/CSS language and syntax, but rather the best practice to apply it - a sort of "Code Complete" for HTML/CSS.

I know the languages but I want to ensure I'm following best practice guidelines as apposed to the "just get it working" philosophy.

Any suggestions would be great. Thanks.

uck51js9zml2yt

SimonTemplar wrote: »

I'm looking for resources (online or books) to get to grips with best practice for front end web development. I'm not looking for something that teaches HTML/CSS language and syntax, but rather the best practice to apply it - a sort of "Code Complete" for HTML/CSS.

I know the languages but I want to ensure I'm following best practice guidelines as apposed to the "just get it working" philosophy.

Any suggestions would be great. Thanks.

w3c. there is also a site called html5. on phone so can't link.

KonFusion

https://developer.mozilla.org/en-US/docs/Web/HTML

http://www.w3.org/

http://www.html5rocks.com/en/

ThrowinShapes

For CSS at least, check out some object-oriented approaches:
http://bem.info/

And then to assist in writing modular CSS that will also scale, try Sass:
http://sass-lang.com/

ChRoMe

Don't ever use tables for layout, attempt to write all code with the idea that it will be changed so make it as modular as possible.

If you stick to those two things, its hard to go wrong.

Graham

Overflow wrote: »

I find it kind of funny that nearly every developer will say the same thing about Tables but rarely give a good reason as ti why you should not use them.

Another thing is the explosion of CSS Grid frameworks. All they do is emulate what the Table element was designed to do, it baffles my mind.

Which looks cleaner ?

<table>
  <tr>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td colspan="2"></td>
  </tr>
</table>

or some css grid layout framework (pseudo code)

<div class="container">
  <div class="row">
    <div class="col-span-1"></div>
    <div class="col-span-1"></div>
  </div>
  <div class="row">
    <div class="col-span-2"></div>
  </div>
</div>

In your example above, how do you later get the bottom table row to appear on the right next to the top table row? Or how do you get the bottom row to appear above the top row?

How about on a mobile phone when you want the two cells in each row to appear one on top of another rather than side-by-side?

The table 'element' was designed to present tabular data, it was not designed to layout complex web pages.

Cork24

http://www.lynda.com/course20/Web-Interactive-CSS-tutorials/CSS-Fundamentals/80436-2.html?w=1

oscarBravo

ChRoMe wrote: »

Don't ever use tables for layout...

...unless what you're laying out is logically tabular.

ChRoMe

oscarBravo wrote: »

...unless what you're laying out is logically tabular.

Even then there are some arguments around accessibility, but yeah they are more corner cases.

COYW

ChRoMe wrote: »

Don't ever use tables for layout

CSS wouldn't be my greatest strength but when I started working with it my old tech lead had a few golden CSS rules and this was his number 1. I stuck by it and I have to admit that it served me well.

stevenmu

I've seen some reasonable arguments in favour of Tables for layout, and a year or two back there was a small movement towards going back to Tables that never seemed to gain any real traction. CSS for layout is still very much the de facto best practices, but I would suggest doing some reading and research into it anyway just to understand all the details and pros and cons. Googling "Tables vs CSS" turns up some interesting results.

As always with all best practices, it's important to understand them rather than just following them wholesale.

ThrowinShapes

Just follow semantics. Are you building a table of data? Then use a table. A list? unordered or an ordered list.

The HTML you're using should describe it's content. This is easier now with HTML5 elements such as <header> <footer> <article> etc... which should alleviate issues such as "div-itis" where you just throw divs at everything.

http://html5doctor.com/

tricky D

A few randoms:

Use the many tools out there for checking, optimising, validating, automating, version controlling, backups, spellchecking, etc...
Comment properly.
Use info from your logs more and better.

Trick: add a comment for end divs to associate them with their opening divs. eg. </div><!-- end lhscontentpanel -->

Use tables for layout, font tags and other bad practices for newsletters. A corollary of sorts for this is to familiarise yourself with how and why html and css evolved the way they have.

Put more effort into accessibility as I find the better you are at this the better your general standards tend to be.