Jump to content


Photo

Two basic CSS Mistakes


  • Please log in to reply
18 replies to this topic

#1 LSW

LSW

    Knight of the Square Cubicle

  • Moderators
  • 8,017 posts
  • LocationJuneau AK

Posted 21 December 2008 - 09:43 PM

Between Newbies posting here lately and spammers claiming to work for big companies but with absolutely shoddy code, it came to me the most common problems with people using CSS. Right off let me say that for newbies this should not be embarrassing, I suffered this problem as well when I started.

Beginners basically beginners are hesitant to use CSS, so they commonly try to work with it bit by bit. Wrong approach - just do it. This is usually seen when someone uses CSS just to effect fonts. Another form is tables with CSS. Yes you can do so but it defeats the purpose. Take this to heart, don?t go half way, just jump in.

Thinking it is HTML: Forget what you learned about HTML, this in not HTML it is CSS, another language. All to often you see beginners writing CSS like it is HTML. Just replacing the Font tag with a class name on every paragraph or such.

The idea is to use external style sheets. Every page is linked to this sheet, make a change to this sheet and every page reflects the change. By using styles inside of the tags, you add wasted code and have to make changes on every element on every page. If you merely define the paragraph tag than every paragraph will have that style, no need to ever ad class or ID's

Do not mix, it just makes things confusing for everyone. I see many spamers with HTML attributes, inline styles in tags next to these with Block styles in the header and even a link to an external style sheet. These are god awful monsters to control. I am Webmaster of a site that is like that, the simplest changes will almost always break the site. Beware and avoid such sites and those who build them.

If you have any CSS, put it all in external style sheets and most any HTML attributes can and should be done in the CSS as well. Remember this is not HTML you are dealing with, do not just replace HTML attributes with styles in the code. If you are going to use CSS it will only bring and advantage if you learn to write CSS as CSS and not as a HTML attribute replacement.

Classes: Beginners always write classes, then you will see a dozen paragraphs with identical class names. Again this is due to this HTML style of writing we learned first and how we had to write fonts into everything. CSS is not that way.

With CSS you can and should use ID's. Why? Well ID's for CSS can also be used as reference points for scripts and internal links, you need not name extra elements. Also for instance you name the upper element with an ID
, everything in that ID can be defined specifically using that ID. So rather than 5 paragraphs with 5 classes, you need put define what a paragraph within an ID should look like. #content p { } will define any paragraph in a DIV named ?content? to have a specific style, any other paragraph in another section will not use that style as it is not in that ID.

This way you can use a default style for paragraphs, but say that paragraphs in you content are shown differently than paragraphs in a footer. By using classes, you are creating far more work for yourself. Simply create a default and then redefine any elements by adding it to a ID description. In this way define links found in one ID element to look different from links in another ID element.

Now this may seem a bit hard to follow, but keep it in mind. CSS is about minimize code. Ask yourself if you can not make things easier and smaller. A class can be used as often as you wish. An ID can be used only once per page. So use ID's as often as possible, then when you go to use a class, ask yourself if it is really something you need. Ask yourself if you need to use it multiple times or if it is not easier just to say, anything in a element with this name should look this way. Why repeat 5 classes in 5 paragraphs when you can say that a paragraph in a element called ?content? should look this way, whether 5 or 25 paragraphs.


So in short as a review:

  • Do not a use CSS inline styles as a replacement for Font tags.
  • Use external style sheets, do not mix HTML attributes, inline styles, block styles (styles in the head tags) and external style sheets. Just use external style sheets for all CSS and HTML attributes.
  • Do not use Classes for everything. Use ID's whenever possible. It is possible to create web sites with few if any classes at all.
  • Define elements with a ID preamble to it so that those styles only go active when the defined element is in a specifically named ID.

Feel free to view my styles and source code. Once you take these tips to heart, you will discover that CSS is much easier to understand then you believed.

Darkshadow-designs & DSD CSS
  • 0

Thank You, Migwetth, Gunalche’esh, Ha’w'aa, Danke
 

"Anything that is in the world when you're born is normal and ordinary and is just a natural part of the way the world works.
 Anything that's invented between when you're fifteen and thirty-five is new and exciting and revolutionary and you can probably get a career in it.
 Anything invented after you're thirty-five is against the natural order of things."
 
                                                                                                                                                    - Douglas Adams from - The Salmon of Doubt (2002)

 


#2 LSW

LSW

    Knight of the Square Cubicle

  • Moderators
  • 8,017 posts
  • LocationJuneau AK

Posted 22 December 2008 - 12:54 PM

:rolleyes:
  • 0

Thank You, Migwetth, Gunalche’esh, Ha’w'aa, Danke
 

"Anything that is in the world when you're born is normal and ordinary and is just a natural part of the way the world works.
 Anything that's invented between when you're fifteen and thirty-five is new and exciting and revolutionary and you can probably get a career in it.
 Anything invented after you're thirty-five is against the natural order of things."
 
                                                                                                                                                    - Douglas Adams from - The Salmon of Doubt (2002)

 


#3 macca

macca

    New member

  • New Members
  • 3 posts

Posted 12 March 2009 - 05:21 PM

Hi I am a newbie and I found that article really helpful, as I think I havent quite mastered the conceptual issues, but when I try to look at the code which I assume is in DSD CSS I just get a blank page. Is there any other way to see it? Am using Safari.
Thanks
Macca
  • 0

#4 Guest_intek

Guest_intek
  • Guests

Posted 19 May 2009 - 01:53 PM

Well Said, and I am new to this and can honestly say I've already done everything you said not to do. And I agree.
  • 0

#5 bsmbahamas

bsmbahamas

    New member

  • New Members
  • 9 posts
  • LocationBahamas

Posted 22 October 2009 - 01:07 PM

I'm new to this forum but been lurking for a while. what you say makes a lot of sense. i just built a site for a client and did exactly what you say not to do, worse i added the same css code to each page even though i know i should link to it via a single file.

what you said about using id's instead of classes is genius, so i shall have to fix that too, lol. thanks for the great tip, i never could really tell which was better to use. but now i know.
  • 0
"We are what we repeatedly do. Excellence, therefore, is not an act, but a habit." -- Aristotle: was a Greek philosopher

#6 LSW

LSW

    Knight of the Square Cubicle

  • Moderators
  • 8,017 posts
  • LocationJuneau AK

Posted 23 October 2009 - 12:08 PM

Glad the post helps...

I am making a new post that touches Quyen's comments... document everything you do regardless of how easy you find it.
  • 0

Thank You, Migwetth, Gunalche’esh, Ha’w'aa, Danke
 

"Anything that is in the world when you're born is normal and ordinary and is just a natural part of the way the world works.
 Anything that's invented between when you're fifteen and thirty-five is new and exciting and revolutionary and you can probably get a career in it.
 Anything invented after you're thirty-five is against the natural order of things."
 
                                                                                                                                                    - Douglas Adams from - The Salmon of Doubt (2002)

 


#7 philmonk

philmonk

    New member

  • New Members
  • 6 posts
  • LocationOxford, UK

Posted 20 January 2010 - 09:45 AM

The only other thing I would add is learn to comment your CSS.

The amount of times I have gone back to some code I wrote and can't remember why I did it a certain way or which bits are for which part of the page etc. This is also true for HTML.

I now always try and comment both HTML and CSS - I'm no saint though :/ but it does help if you are working on project with other people or like I said you come back to a project down the line
  • 0

#8 LSW

LSW

    Knight of the Square Cubicle

  • Moderators
  • 8,017 posts
  • LocationJuneau AK

Posted 20 January 2010 - 11:57 AM

LOL - That should be the 11th commandment.

I generally break mine into blocks: Standard HTML, Navigation, Structure/General, Special.

If I want to edit a HTML tag, I go to that block. General &/or structure is ID's I created. Special is where I look for something used maybe only in one page. Navigation parts are in the nav block. It helps me find them quicker in the editor.
  • 0

Thank You, Migwetth, Gunalche’esh, Ha’w'aa, Danke
 

"Anything that is in the world when you're born is normal and ordinary and is just a natural part of the way the world works.
 Anything that's invented between when you're fifteen and thirty-five is new and exciting and revolutionary and you can probably get a career in it.
 Anything invented after you're thirty-five is against the natural order of things."
 
                                                                                                                                                    - Douglas Adams from - The Salmon of Doubt (2002)

 


#9 MacRankin

MacRankin

    Advanced Member

  • Member
  • PipPipPipPip
  • 477 posts
  • LocationLondon

Posted 03 May 2010 - 02:43 PM

LOL - That should be the 11th commandment.

I generally break mine into blocks: Standard HTML, Navigation, Structure/General, Special.

If I want to edit a HTML tag, I go to that block. General &/or structure is ID's I created. Special is where I look for something used maybe only in one page. Navigation parts are in the nav block. It helps me find them quicker in the editor.



There's some really good stuff in here that I had forgotten about. I'm not really a newbie, as such. Just someone who's lost their way a bit. Silly memory of mine. :rolleyes:

I especially like the comment about commenting, and Kyle's module structured approach, if that's the right terminology. Sometimes just reading stuff like this is so much better than slogging through all those tutorials again. Though, having said that I'll still need the tutorials to get me up and running (but, not so fast) again.

I don't suppose there are many newbies out there that will appreciate such wise words until it finally hits them (between the eyes) further on down the road. :lol:
  • 0
We Brits do things differently, but we still get shot at!

#10 Guest_websitedesign

Guest_websitedesign
  • Guests

Posted 10 May 2010 - 04:09 PM

One big mistake everyone starts off making with CSS is the overuse of div elements.

YOu should be grouping elements according to classes and planning out the structure beforehand
  • 0

#11 Andrea

Andrea

    Advanced Member

  • Moderators
  • 5,681 posts
  • Facebook:https://www.facebook.com/aandbwebdesignAB
  • LocationSan Antonio, TX

Posted 10 May 2010 - 04:37 PM

You should be grouping elements according to classes.....

Can you explain that?
  • 0

#12 NuCoder

NuCoder

    Advanced Member

  • Member
  • PipPipPipPip
  • 256 posts
  • LocationClearwater, Fl

Posted 10 May 2010 - 07:29 PM

Nice post Kyle - thank you for sharing
  • 0

#13 mittin

mittin

    New member

  • Member
  • 12 posts

Posted 17 April 2011 - 07:17 AM

I have been reading a book named CSS mastery advanced web standards solutions second addition, and basiclly the author of the book has a totall oposite view on ID and classes. He talkks about over using ID's and then getting extremly long and complicated naming conventions, and then you run out of unique names. whereas with classes yuo can still have the flexibilty he states, and that many new users who use classes will over use classes as its an indication that the html document is poorly sturctred.
  • 0

#14 abhyudaya

abhyudaya

    New member

  • New Members
  • 3 posts

Posted 22 December 2011 - 05:36 AM

Well Said, and I am new to this and can honestly say I've already done everything you said not to do. And I agree. it is really very helpful for the beginners............ :raised:

Edited by Andrea, 22 December 2011 - 05:44 AM.
Link Deleted - No Spam, please

  • 0

#15 bsmbahamas

bsmbahamas

    New member

  • New Members
  • 9 posts
  • LocationBahamas

Posted 06 January 2012 - 07:09 PM

you can kind of think of external css files like a functions.php file where you store everything with unique names and then you can call any of those functions from any page that links to that external file.

so if you declare .success { border: 1px solid green; font-color: green; } then you can simply add the class
.success to any element that should have that green border and green text, make another called .error with a red border and red fonts and use can use that on elements that display errors - and you don't have to keep re-writing the same css over and over you just add class='success' or class='error' to the elements.

i'd also hasten to add that id are unique and should only be added to one element per page, but classes can be added to many elements on the same page. when i first started out i didn't know the difference and would use the same id multiple times on the same page(because css does not tell you when you make a mistake liek javascript or php does, lmao)
  • 0
"We are what we repeatedly do. Excellence, therefore, is not an act, but a habit." -- Aristotle: was a Greek philosopher

#16 Dhanishta

Dhanishta

    Member

  • Member
  • PipPipPip
  • 66 posts
  • LocationIndia

Posted 18 September 2012 - 09:34 AM

Hi, I am also newbie here, though HTML and CSS are two different internet languages, i compare CSS with HTML, may be because of both are having tags. But its true that both are two different languages, Thanks for sharing this post.
  • 0

#17 Arturas

Arturas

    New member

  • New Members
  • 2 posts

Posted 05 January 2013 - 06:10 PM

Thx.... I finish HTML and started CSS its far away harder for me to understand border padding margin how pixels push each other... margin: 0 auto; and that
kind of things confusing... how to get better understanding about all page layout?, how to train myself ,how to start feel

and do right with pixels ? many thx ... can write answer to : arturas.semeniukas@gmail.com i am siting all days on learning,

and too much information get me a little confusing..
  • 0

#18 Guest_linda2013

Guest_linda2013
  • Guests

Posted 22 February 2013 - 11:55 PM

great....................
  • 0

#19 Jeremy

Jeremy

    Member

  • Member
  • PipPip
  • 33 posts
  • LocationNorth Yorkshire, United Kingdom

Posted 26 November 2013 - 08:19 AM

I am not a noob when it comes to say sys admin (dont tons of work in that respect, so that's my background), personally I find the tips in the book CSS Mastery by Andy Budd full of amazing tips part of that and yea what the OP said once you break things down and really experiment (by seeing what happens to an element when I do this..) in exactly the same way when I came to fully understand Regex's (I would strongly recommend noob's going into any kind of programming that has functions for regex's not to start off doing them they're very cryptic) but yea I experimented now I can (when I think about it hard) even diagnose regex's or explain what they do by just looking at them closely.

It's the same approach I have to CSS.

One thing I'd say not even that sometimes with what the OP (absolutely no offence meant by this, this is purely just my opinion), if all you have for say a top heading (H1 if you will) and its just purely that nothing else why bother putting that (if it's on its own) as an ID? Unless you wanted a similar style to that on other parts of the page, but if not just use the type/element selectors!
  • 0




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users