Do’s and Don’ts of Writing Better CSS and HTML

Posted in HTML & CSS, Tips, Tutorials3 years ago • Written by 34 Comments

CSS and HTML are key languages to begin with, when you decide to invest your time in web design and development. They are powerful languages and most of the time may seem simple to work with.

However, every single one of us, beginners, or advanced developers, have committed basic or major mistakes working with both these languages. With this in mind, I believe it is extremely important and always welcome to learn some good tips and practices which I hope will help you improve your skills and experience.

 

Some of you may be thinking that since you don’t see anything out of place when viewing your web page, you have your HTML and CSS documents built correctly, but you may be wrong. The truth is that you should not trust everything you code. Using the same ID more than once on the same page won’t result in wrong alignments or retrieve any error (unless you try to validate), but it is in fact bad markup and a major flaw in your code.

Doctype

Doctype

Not so long ago, we had to use those really long Doctypes that were almost impossible to remember. Now, since you just need to use <!DOCTYPE html> on the top of your document, we have a much cleaner and better solution. Nevertheless, some people still forgets to specify it. This is mandatory for a validated and organized HTML document.

How you should do it

Never forget your DOCTYPE.

ID vs Classes

ID vs Class

An ID is a unique identifier which allows us to target a specific element on the page and, since it is unique, it can only be used once in a page. On the other hand, we have classes which allow us to do exactly the opposite. Classes are used when you have the same element more than once on a page.

How not to do it:

<div id="block">
   <div id="btn"></div>
   <div id="btn"></div>
</div>

How you should do it:

<div id="block">
   <div class="btn"></div>
   <div class="btn"></div>
</div>

Say no to inline styling

Say no to inline styling

Inline styling is unfortunately a pretty common practice and at the same time a bad one. It has nothing to do with invalid code or bad markup, but with organized code and structure. Imagine you have 30 pages and you need to remove an inline style you have applied to the same div on every single page, it would take you forever and steal precious time.

How not to do it:

<div style="width: 100%; background: #fff;"></div>

How you should do it:

<div id="wrap"></div>

Ove use of divs and CSS Classes

Over use of divs and CSS classes

So you started your own project, you know how to use divs, ids, and classes. Inline styling is not your thing (fortunately), and you love to create styles and apply them everywhere. That’s great, but don’t write more than you have to. Having a div with an unordered list inside and a class applied to each li element is unnecessary.

How not to do it:

<div id="navigation">
   <ul>
      <li class="left"></li>
      <li class="left"></li>
      <li class="left"></li>
   </ul>
</div>

How you should do it

<ul id="navigation">
   <li></li>
   <li></li>
   <li></li>
</ul>

And in your stylesheet

#navigation li { float: left; }

Browser Resolution

Browser Resolution

According to the W3c’s latest statistics (January 2011), 13.8% of internet users have a 1024×768 screen resolution, and 85.1% use a bigger screen resolution. So the question is “What resolution I should design for?” I personally use a maximum width of 960 or 980 pixels for a vertical layout and between 550 and 640 pixels in case of a horizontal layout. Besides, though 13.8% seems to be a fairly low number, it still represents millions of internet users.

How you should do it

Consider everyone’s needs, and especially your target audience.

Block vs Inline elements

Block vs Inline elements

Differentiating block from inline elements can be a a delicate matter for beginners. A block element is displayed on a new line taking by default 100% width of the containing element, like divs (<div>) or paragraphs (<p>). An inline element is displayed with no line breaks meaning that it starts on the same line, taking only his own width, like span (<span>) or image (<img>). You can also change the way an element is displayed, this means that you can change an inline element to be display as a block and vice versa.

How you should do it


span { display: block; }

Use comments to organize your code

Comments

When I start a project, I try to organize it through commenting as much as possible and you should do the same. This is something purely optional but I highly recommend its use. It not only helps you find the section or element your are looking for, but also makes your life easier when you need to know which div your </div> is closing.

How you should do it

<!-- Begin #header -->
<div id="header">
<!-- End #header -->
</div>

Stylesheet:

/* --------------------------------------------------------------
Header
-------------------------------------------------------------- */
#header { background: #fff; }

Cross-Browser Compatibility

Cross-Browser Compatibility

When you decide to make something, you should place yourself in the role of the end-user, and imagine that, even today, some of them still use browsers like IE6. A page in renders differently in Firefox than in Chrome or Internet Explorer. There are some useful tools you can use to check how your page renders in different browsers. Charina wrote a very complete article regarding this topic which I recommend reading – 10 Useful Tools For Cross-Browser Compatibility Check

How you should do it

Do not forget to pay attention to your layout in different browsers, systematically.

Keep it short – Generic classes, properties and CSS files

Keep it short - Generic Classes, properties, and CSS files.

When you are coding you should always have one thing in mind, plan for the future. You are already using comments and keeping your code organized, so why stop here? The first thing I do when I’m coding CSS is to specify a section of generic classes, then on my HTML I simply use them alongside with other elements.

How not to do it:

Stylesheet

#firstblock { background: #000; float: left; }
.genblock { background: #006699; float: left; }

HTML

<div id="firstblock"</div>
<div class="genblock"></div>

How you should do it

Stylesheet

.left { float: left; }
#firstblock { background: #000; }
.genblock { background: #006699; }

HTML

<div id="firstblock" class="left"></div>

<div class="genblock  left"></div>

This is a simple way of declaring two classes. I like to find the most efficient way to do things, and as you can already guess, I really like keeping things organized, so when it comes down to properties, it’s the same thing. Why should we write the same property over and over again when we just need to write it once?

How not to do it:

#content { margin-top: 10px; margin-right: 12px; margin-bottom: 0; margin-left: 15px; background-color: #000; background-repeat: no-repeat; }

How you should do it:

#content { margin: 10px 12px 0 15px; background: #000 no-repeat; }

The ideal number of CSS files you should have in your project depends entirely on you and the way you work. I have been involved in projects where there was a “generic.css”, “main.css”, “global.css” among others, it took me forever to understand the purpose of each file. I usually have just two CSS files on my projects – style.css and reset.css.

How you should do it
You should make it simple and efficient to edit later on.

Don’t use heading tags randomly

Don't use heading tags randomly
Heading tags are not just there to make it pretty, they establish the importance of your content which makes them valuable for SEO. There are six Heading tags: h1, h2, h3, h4, h5, and h6. H1 is the most important, so you should use it for your web page or business name only. The rest of the tags should be used according to title or content importance. Also, you don’t need to have heading tags everywhere on your document.

How not to do it:


<h6>Post title</h6>

<h1>Text content</h1>

How you should do it:

<h2>Post title</h2>
<p>Text content</p>

Use absolute position only when you have to

Use absolute position only when you need to

When you’re starting out, you can easily become addicted to the use of absolute positioning. This is because it is an easy way of placing elements, however, this property should not be used excessively. Since elements with absolute position lose their normal flow, it is almost impossible to align them with other sections on the page. You simply can’t tell a normal element to be on the left side of an element with absolute position.

How you should do it:

Use absolute position only when you need to, and not because it is easier.

Type fonts

Type Fonts

So is there a font you really like and you would love to use it on your page, is it a standard font? What if not? These are are questions you need to ask before you choose your typography. When you choose a font you must always have a backup plan, this means that in case the user does not have the chosen font, the second choice (or third, etc) will appear. Examples of standard fonts are Arial, Georgia, Lucida Sans Code, Times New Roman, Verdana, Tahoma, and some more. Now let’s say you would like to use a font that is non-standard, what would you do? The most obvious answer is @font-face.

How not to do it:

p { font-family: AurulentSansRegular, Arial, Helvetica, sans-serif; }

How you should do it:

@font-face {

font-family: 'AurulentSansRegular';

src: url('AurulentSans-Regular-webfont.ttf') format('truetype');

}

p { font-family: 'AurulentSansRegular', Arial, Helvetica, sans-serif; }

Always validate

Always validate your code

The title is pretty self-explanatory, you should always validate your CSS and HTML documents. Why? The answer is why not? You have a way to know if your code has errors and it gives you solutions to fix them, so really, why not? Add CSS Validator and HTML Validator to your favourites.

How you should do it

Validate your CSS, and after that do the same for your HTML.

Conclusion

Some may consider these tips and techniques common sense and simple to understand, others not so much, but the important thing is that every coder make mistakes, and practice makes perfect.

Hope you enjoyed the article and have some fun experimenting, but keep it organized!

18 Written ArticlesWebsite

I am a Portuguese UI/UX designer, visual designer and writer. I have a Bachelor's Degree in Information Technology and Multimedia and I'm addicted to web technologies and design. Feel free to check my work on Behance or Dribbble. You can also follow me on Twitter.

34 Comments Best Comments First
  • Rasel

    Saturday, April 30th, 2011 11:04

    10

    This is incredibly surprising.This is really resourceful article and interesting also.Thanks for sharing nice idea.I think it will be helpful for me.

    +2
  • rafael armstrong

    Tuesday, May 10th, 2011 14:59

    30

    Thanks for the post. Definitely a good primer for those starting out, as well as a nice refresher for those that may have been doing it for a bit.

    +1
  • Alex

    Saturday, April 30th, 2011 10:45

    9

    I recently started using max width of 980px. I think it’s ok for the most users now, as screens are getting bigger and more high-res. I agree that you always should validate, but only to find some obvious typos and errors and not as “my code needs to validate or I won’t launch the web site”, because we are using CSS3 and HTML5 more and more, and these are still in development. Good read Thanks!

    0
    • Ruben D'Oliveira

      Saturday, April 30th, 2011 22:11

      12

      Yes, indeed. One good example is apple.com … they use a width of 980px at this point. Thank you for reading :)

      0
  • Gleenk

    Friday, April 29th, 2011 16:32

    1

    This is fun, why i don’t have to use absolute positioning? :O
    Surprised

    0
    • Ruben D'Oliveira

      Saturday, April 30th, 2011 22:15

      13

      I’m glad you’re having fun. Believe it or not, there are some people who likes to use absolute positioning for everything, instead of following the normal flow. I think I did explain that in the article.

      0
  • Rey

    Friday, April 29th, 2011 13:48

    3

    Great Article, good advice for web developer starters. Too many stock images, maybe some actual screenshots of code from other websites as image would be more useful.

    For “custom” fonts I would recommend using fontsquirrel

    0
    • Ruben D'Oliveira

      Saturday, April 30th, 2011 22:19

      14

      Hi Rey. The double image on the top was an error. Thank you for the advice.
      Yes, FontSquirrel is also a great resource. Glad you did enjoy the article :)

      0
  • DirTek

    Friday, April 29th, 2011 12:58

    2

    Very useful article!

    I’m following most of them, except the “generic classes” one…but I’m going to use that one as well from now on.

    Cheers!

    0
    • Ruben D'Oliveira

      Saturday, April 30th, 2011 22:21

      15

      Thank you!

      That’s great :)

      0
  • John

    Friday, April 29th, 2011 22:44

    4

    “I personally use a maximum width of 960 or 980 pixels for a vertical layout”.
    I think you mean horizontal. That is the width I normally use as well.

    0
    • Ruben D'Oliveira

      Saturday, April 30th, 2011 13:09

      8

      Hi John. I actually missed a word there, but the point is actually correct. I forgot to include height in the sentence.
      An horizontal layout will have way more than a width of 960/980 pixels.

      960/980px width for a vertical layout, and a height between 550/640 pixels in case of an horizontal layout.

      But thank you for pointing that out :)

      0
  • Renato Alves

    Saturday, April 30th, 2011 02:24

    5

    Hi Ruben, I enjoyed your article. Very interesting indeed.

    0
    • Ruben D'Oliveira

      Saturday, April 30th, 2011 13:04

      7

      Hi Renato. Thank you. Glad you like it

      0
  • Scott

    Saturday, April 30th, 2011 11:04

    6

    Its all fine and well to say no inline styling but its not practical in the real world. If times against you and you need the job done quickly inline styling is often the solution. I agree it can be messy and cause problem further down the line but anyone one who knows how to use firebug should have no problem with it.

    0
    • Ruben D'Oliveira

      Saturday, April 30th, 2011 22:08

      11

      The article is focused on how to write better CSS and HTML.

      You have a point where you say that some times it’s quicker, but that doesn’t make it right ;) However, if you need to make edits later on, it will take more time. In the end, it wont be quick.

      0
  • john macon

    Sunday, May 1st, 2011 05:19

    17

    I have developed a system of css that combines a “master” file that has all of my colors, font sizes, standard margins, etc. All of the things that I find I use on almost every project are then pre-defined. Then I write a “project” file that has specific spacing, positioning, colors, etc for that project only. It allows me to start developing much faster because I know my generic classes already and when a generic class won’t fit, I can add to the project file without messing with my master file. It has made my life so much easier.

    0
    • Ruben D'Oliveira

      Sunday, May 1st, 2011 13:28

      18

      Having an external CSS for generic classes is indeed an even better way to organize and re-use code :)

      0
  • kailash

    Friday, May 6th, 2011 08:18

    29

    great thanks for your help

    0
  • Paul Mckay

    Wednesday, May 4th, 2011 17:20

    28

    Nice read :-)

    I have to agree with you on the validation process. I understand that during these times of CSS3 and HTML5, not all sites are going to be W3C Compliant, Google isn’t even compliant, but I see it as good practice to make sure the code is as valid as it can be. Even if your using CSS3 within the development, you can still look to get the HTML compliant. What harm is it going to do?

    I design and develop my vertical sites with a width of 900 – 950px. I’ve found that in the previous versions of Firefox, ( not so much in Firefox 4 ), there was a bug that cropped the site if you re-sized the browser. To get around this, I now code my sites within a div container and it seems to of solved the problem for the moment. Plus, I find that keeping the site in a 950px max container allows the site to sit nicely within the ipad and iphone without unnecessary scroll bars.

    I have to say, my coding a few years back was disgustingly shocking, but since working at a web design agency, I’ve found that I follow 95% of the pointers you’ve mentioned above.

    0
  • JoeFlash

    Friday, May 13th, 2011 19:44

    31

    RE: Use comments to organize your code
    I follow the same practices but have used a more terse approach to keep it simple.


    <div id="header">
    </div><!-- #header -->

    <div id="header" class="bolder">
    </div><!-- #header.bolder -->

    StyleSheet Sections:
    /* >> Site Header */
    #header { background: #fff none; }
    .tab { height: 25px; }
    /* << Site Header */

    0
  • Brummie

    Sunday, May 15th, 2011 14:17

    32

    I am having difficulties in targeting a specific elements. By comparing the do and don’ts I found out that I’m following the wrong pace. Though it will take time, it doesn’t matter since I have the assurance that the result of my CSS design is Greater than ever.

    0
  • Michael Thomas

    Wednesday, September 14th, 2011 01:25

    34

    It really annoys me when people use inline styles within their web design. Good work on touching that in your blog.

    0
  • jeab

    Sunday, June 12th, 2011 11:43

    33

    Thanks for your tips :-)

    0
  • Lincoln Solicitors

    Tuesday, May 3rd, 2011 19:35

    27

    What a brilliant article. Thanks for producing it for us.

    0
  • Eric

    Sunday, May 1st, 2011 21:11

    19

    Very nice tips, thank you!
    There’s a type on the “Keep it Short,” “How not to do it” section:

    <div id="firstblock"
    << –Missing closing angle bracket

    0
    • Ruben D'Oliveira

      Tuesday, May 3rd, 2011 14:05

      23

      Thank you, Eric. I will fix that :)

      0
    • Jesper Wallin

      Sunday, May 1st, 2011 23:08

      20

      There’s a typo in your comment:

      There’s a type << -A "type" instead of "typo" .. ;-)

      :-P

      0
  • Eric Bieller

    Monday, May 2nd, 2011 22:45

    21

    While I agree with a lot of what you said here are the problems I have:

    While comments like this one can sometime be helpful, they can also be redundant. It is important to not waste time with redundant commenting.

    .left { float: left; }
    #firstblock { background: #000; }
    .genblock { background: #006699; }

    Making a class that controls a positioning property like float is generally a bad idea. This defeats the purpose of separating CSS and HTML by putting the positioning layer back in your HTML when it belongs in the CSS.

    I also think your tip about “Use absolute position only when you have to” is a little misleading. Every CSS command has a place. Instead of telling us to simple “Use it sparingly” you should give us examples of where it is good to use absolute positioning.

    “Always Validate” – Strongly disagree. There is way to much weight put on validation. CSS commands like -moz-border-shadow will never validate, though they are perfectly acceptable to use. Validation is good to use to get rid of any huge errors but there are some techniques that will never validate though they are considered acceptable practices. Here is a very interesting case against excessive validation: http://www.codinghorror.com/blog/2009/03/html-validation-does-it-matter.html – It shows how tons of huge websites don’t even come close to validating.

    Just my $.02. Overall I agree with the other points made. Thanks for sharing!

    0
    • soreyn

      Tuesday, May 3rd, 2011 10:18

      26

      I agree with your opinion on classes for positioning! I have even seen websites were they use selectors to define the width of an element… This can be ok for smaller websites but for large websites this can really cause trouble.

      0
  • Geoffrey Gordon

    Tuesday, May 3rd, 2011 08:29

    25

    Love this article, book mared and will go through it more throughly later.

    0
  • Eric Bieller

    Monday, May 2nd, 2011 22:46

    22

    While I agree with a lot of what you said here are the problems I have:

    While comments like this one can sometime be helpful, they can also be redundant. It is important to not waste time with redundant commenting.

    .left { float: left; }
    #firstblock { background: #000; }
    .genblock { background: #006699; }

    Making a class that controls a positioning property like float is generally a bad idea. This defeats the purpose of separating CSS and HTML by putting the positioning layer back in your HTML when it belongs in the CSS.

    I also think your tip about “Use absolute position only when you have to” is a little misleading. Every CSS command has a place. Instead of telling us to simple “Use it sparingly” you should give us examples of where it is good to use absolute positioning.

    “Always Validate” – Strongly disagree. There is way to much weight put on validation. CSS commands like -moz-border-shadow will never validate, though they are perfectly acceptable to use. Validation is good to use to get rid of any huge errors but there are some techniques that will never validate though they are considered acceptable practices. Here is a very interesting case against excessive validation: http://www.codinghorror.com/blog/2009/03/html-validation-does-it-matter.html – Shows many huge websites that have tons of validation errors.

    Just my $.02. Overall I agree with the other points made. Thanks for sharing!

    -1
    • Ruben D'Oliveira

      Tuesday, May 3rd, 2011 14:16

      24

      Thank you for the feedback :)

      Even if you have CSS commands like -moz-border-shadow, you should always go through the validation process. This is because you can have mistakes in your code that can actually be fixed. In those cases, validation does not mean that you need to have you code 100% validated, it just means that you should always try to fix errors that you might have that can be fixed.

      Regarding position, comments and generic classes, that can be material for a next article where I can try to explain and give examples where you can use them.

      Thank you once again ;)

      0
  • Michael Thomas

    Wednesday, September 14th, 2011 01:25

    34

    It really annoys me when people use inline styles within their web design. Good work on touching that in your blog.

    0
  • jeab

    Sunday, June 12th, 2011 11:43

    33

    Thanks for your tips :-)

    0
  • Brummie

    Sunday, May 15th, 2011 14:17

    32

    I am having difficulties in targeting a specific elements. By comparing the do and don’ts I found out that I’m following the wrong pace. Though it will take time, it doesn’t matter since I have the assurance that the result of my CSS design is Greater than ever.

    0
  • JoeFlash

    Friday, May 13th, 2011 19:44

    31

    RE: Use comments to organize your code
    I follow the same practices but have used a more terse approach to keep it simple.


    <div id="header">
    </div><!-- #header -->

    <div id="header" class="bolder">
    </div><!-- #header.bolder -->

    StyleSheet Sections:
    /* >> Site Header */
    #header { background: #fff none; }
    .tab { height: 25px; }
    /* << Site Header */

    0
  • rafael armstrong

    Tuesday, May 10th, 2011 14:59

    30

    Thanks for the post. Definitely a good primer for those starting out, as well as a nice refresher for those that may have been doing it for a bit.

    +1
  • kailash

    Friday, May 6th, 2011 08:18

    29

    great thanks for your help

    0
  • Paul Mckay

    Wednesday, May 4th, 2011 17:20

    28

    Nice read :-)

    I have to agree with you on the validation process. I understand that during these times of CSS3 and HTML5, not all sites are going to be W3C Compliant, Google isn’t even compliant, but I see it as good practice to make sure the code is as valid as it can be. Even if your using CSS3 within the development, you can still look to get the HTML compliant. What harm is it going to do?

    I design and develop my vertical sites with a width of 900 – 950px. I’ve found that in the previous versions of Firefox, ( not so much in Firefox 4 ), there was a bug that cropped the site if you re-sized the browser. To get around this, I now code my sites within a div container and it seems to of solved the problem for the moment. Plus, I find that keeping the site in a 950px max container allows the site to sit nicely within the ipad and iphone without unnecessary scroll bars.

    I have to say, my coding a few years back was disgustingly shocking, but since working at a web design agency, I’ve found that I follow 95% of the pointers you’ve mentioned above.

    0
  • Lincoln Solicitors

    Tuesday, May 3rd, 2011 19:35

    27

    What a brilliant article. Thanks for producing it for us.

    0
  • Geoffrey Gordon

    Tuesday, May 3rd, 2011 08:29

    25

    Love this article, book mared and will go through it more throughly later.

    0
  • Eric Bieller

    Monday, May 2nd, 2011 22:46

    22

    While I agree with a lot of what you said here are the problems I have:

    While comments like this one can sometime be helpful, they can also be redundant. It is important to not waste time with redundant commenting.

    .left { float: left; }
    #firstblock { background: #000; }
    .genblock { background: #006699; }

    Making a class that controls a positioning property like float is generally a bad idea. This defeats the purpose of separating CSS and HTML by putting the positioning layer back in your HTML when it belongs in the CSS.

    I also think your tip about “Use absolute position only when you have to” is a little misleading. Every CSS command has a place. Instead of telling us to simple “Use it sparingly” you should give us examples of where it is good to use absolute positioning.

    “Always Validate” – Strongly disagree. There is way to much weight put on validation. CSS commands like -moz-border-shadow will never validate, though they are perfectly acceptable to use. Validation is good to use to get rid of any huge errors but there are some techniques that will never validate though they are considered acceptable practices. Here is a very interesting case against excessive validation: http://www.codinghorror.com/blog/2009/03/html-validation-does-it-matter.html – Shows many huge websites that have tons of validation errors.

    Just my $.02. Overall I agree with the other points made. Thanks for sharing!

    -1
    • Ruben D'Oliveira

      Tuesday, May 3rd, 2011 14:16

      24

      Thank you for the feedback :)

      Even if you have CSS commands like -moz-border-shadow, you should always go through the validation process. This is because you can have mistakes in your code that can actually be fixed. In those cases, validation does not mean that you need to have you code 100% validated, it just means that you should always try to fix errors that you might have that can be fixed.

      Regarding position, comments and generic classes, that can be material for a next article where I can try to explain and give examples where you can use them.

      Thank you once again ;)

      0
  • Eric Bieller

    Monday, May 2nd, 2011 22:45

    21

    While I agree with a lot of what you said here are the problems I have:

    While comments like this one can sometime be helpful, they can also be redundant. It is important to not waste time with redundant commenting.

    .left { float: left; }
    #firstblock { background: #000; }
    .genblock { background: #006699; }

    Making a class that controls a positioning property like float is generally a bad idea. This defeats the purpose of separating CSS and HTML by putting the positioning layer back in your HTML when it belongs in the CSS.

    I also think your tip about “Use absolute position only when you have to” is a little misleading. Every CSS command has a place. Instead of telling us to simple “Use it sparingly” you should give us examples of where it is good to use absolute positioning.

    “Always Validate” – Strongly disagree. There is way to much weight put on validation. CSS commands like -moz-border-shadow will never validate, though they are perfectly acceptable to use. Validation is good to use to get rid of any huge errors but there are some techniques that will never validate though they are considered acceptable practices. Here is a very interesting case against excessive validation: http://www.codinghorror.com/blog/2009/03/html-validation-does-it-matter.html – It shows how tons of huge websites don’t even come close to validating.

    Just my $.02. Overall I agree with the other points made. Thanks for sharing!

    0
    • soreyn

      Tuesday, May 3rd, 2011 10:18

      26

      I agree with your opinion on classes for positioning! I have even seen websites were they use selectors to define the width of an element… This can be ok for smaller websites but for large websites this can really cause trouble.

      0
  • Eric

    Sunday, May 1st, 2011 21:11

    19

    Very nice tips, thank you!
    There’s a type on the “Keep it Short,” “How not to do it” section:

    <div id="firstblock"
    << –Missing closing angle bracket

    0
    • Jesper Wallin

      Sunday, May 1st, 2011 23:08

      20

      There’s a typo in your comment:

      There’s a type << -A "type" instead of "typo" .. ;-)

      :-P

      0
    • Ruben D'Oliveira

      Tuesday, May 3rd, 2011 14:05

      23

      Thank you, Eric. I will fix that :)

      0
  • john macon

    Sunday, May 1st, 2011 05:19

    17

    I have developed a system of css that combines a “master” file that has all of my colors, font sizes, standard margins, etc. All of the things that I find I use on almost every project are then pre-defined. Then I write a “project” file that has specific spacing, positioning, colors, etc for that project only. It allows me to start developing much faster because I know my generic classes already and when a generic class won’t fit, I can add to the project file without messing with my master file. It has made my life so much easier.

    0
    • Ruben D'Oliveira

      Sunday, May 1st, 2011 13:28

      18

      Having an external CSS for generic classes is indeed an even better way to organize and re-use code :)

      0
  • Rasel

    Saturday, April 30th, 2011 11:04

    10

    This is incredibly surprising.This is really resourceful article and interesting also.Thanks for sharing nice idea.I think it will be helpful for me.

    +2
  • Alex

    Saturday, April 30th, 2011 10:45

    9

    I recently started using max width of 980px. I think it’s ok for the most users now, as screens are getting bigger and more high-res. I agree that you always should validate, but only to find some obvious typos and errors and not as “my code needs to validate or I won’t launch the web site”, because we are using CSS3 and HTML5 more and more, and these are still in development. Good read Thanks!

    0
    • Ruben D'Oliveira

      Saturday, April 30th, 2011 22:11

      12

      Yes, indeed. One good example is apple.com … they use a width of 980px at this point. Thank you for reading :)

      0
  • Scott

    Saturday, April 30th, 2011 11:04

    6

    Its all fine and well to say no inline styling but its not practical in the real world. If times against you and you need the job done quickly inline styling is often the solution. I agree it can be messy and cause problem further down the line but anyone one who knows how to use firebug should have no problem with it.

    0
    • Ruben D'Oliveira

      Saturday, April 30th, 2011 22:08

      11

      The article is focused on how to write better CSS and HTML.

      You have a point where you say that some times it’s quicker, but that doesn’t make it right ;) However, if you need to make edits later on, it will take more time. In the end, it wont be quick.

      0
  • Renato Alves

    Saturday, April 30th, 2011 02:24

    5

    Hi Ruben, I enjoyed your article. Very interesting indeed.

    0
    • Ruben D'Oliveira

      Saturday, April 30th, 2011 13:04

      7

      Hi Renato. Thank you. Glad you like it

      0
  • John

    Friday, April 29th, 2011 22:44

    4

    “I personally use a maximum width of 960 or 980 pixels for a vertical layout”.
    I think you mean horizontal. That is the width I normally use as well.

    0
    • Ruben D'Oliveira

      Saturday, April 30th, 2011 13:09

      8

      Hi John. I actually missed a word there, but the point is actually correct. I forgot to include height in the sentence.
      An horizontal layout will have way more than a width of 960/980 pixels.

      960/980px width for a vertical layout, and a height between 550/640 pixels in case of an horizontal layout.

      But thank you for pointing that out :)

      0
  • Rey

    Friday, April 29th, 2011 13:48

    3

    Great Article, good advice for web developer starters. Too many stock images, maybe some actual screenshots of code from other websites as image would be more useful.

    For “custom” fonts I would recommend using fontsquirrel

    0
    • Ruben D'Oliveira

      Saturday, April 30th, 2011 22:19

      14

      Hi Rey. The double image on the top was an error. Thank you for the advice.
      Yes, FontSquirrel is also a great resource. Glad you did enjoy the article :)

      0
  • DirTek

    Friday, April 29th, 2011 12:58

    2

    Very useful article!

    I’m following most of them, except the “generic classes” one…but I’m going to use that one as well from now on.

    Cheers!

    0
    • Ruben D'Oliveira

      Saturday, April 30th, 2011 22:21

      15

      Thank you!

      That’s great :)

      0
  • Gleenk

    Friday, April 29th, 2011 16:32

    1

    This is fun, why i don’t have to use absolute positioning? :O
    Surprised

    0
    • Ruben D'Oliveira

      Saturday, April 30th, 2011 22:15

      13

      I’m glad you’re having fun. Believe it or not, there are some people who likes to use absolute positioning for everything, instead of following the normal flow. I think I did explain that in the article.

      0

Comments are closed.

54.204.127.56 - unknown - unknown - US