Syndicate

Feed

Lynda.com CSS Positioning Best Practices course reviewed

What do you have in CSS, Lynda? Nothing much, n'est-ce-pas? Apart from Adobe stuff and other stuff that's just too plain old...

About a month ago, I needed CSS material to get my CSS juices flowing again, ideally in screencasts form. I ordered the book and DVD bundle Handcrafted CSS by Dan Cederholm and Ethan Marcotte. I received the book and DVD two weeks ago but haven't really started on that yet. At about the same time, I also decided to do the Lynda.com CSS Positioning Best Practices course. The “best practices” bit was alluring, and positioning is what's hard in CSS, so... I added each chapter of it (the course) to my ActionMethod, and promised myself to hit the finish line. So I did. Here's the post-mortem of my generally unpleasant experience.

What do you have in CSS Lynda

Didn't learn much anything

My overall impression: the positioning explanations were okay. As I was going through the screencasts, I was constantly investigating it all, trying my hand at harder things. For example, what if the nearest positioned ancestor of an absolutely-positioned element has padding and a border, what will the latter rest again? Other example: I tested the ins and outs of using percentage and pixels for background-image positioning. I've always had a little trouble with that. What else? The negative margin applied to the current tab — I liked that. What I didn't like: too many unnecessary wrapper divs. Why wrap your navigation ul in a div, when you can position that ul just as easily...? There wasn't enough lists used for menus. A regular paragraph was always used for the following common menu “pattern”:

Horizontal Menu Pattern

Bill Weinman sounds a bit depressed. But a tad bit depressed is much better than overly cheerful. He's a good teacher.

Levels of stylesheets

Bill Weinman says in the chapter titled Understanding levels of style sheets that:

“There are 3 major levels of stylesheets in CSS, and one is applied first, and then another, and then another.”

According to him, these major levels are:

  • Inline styles that use the style attribute
  • Styles defined in style tags
  • Styles defined in external .css files

According to him, styles defined in style tags will always override those defined in external stylehseets.

That's wrong.

Styles defined in style tags are on the same exact “level” as styles defined in external stylesheets.

Bill Weinman goes on to show that a rule put in a style tag overrides another rule placed in his external stylesheet, but the cause of this has nothing to do with “levels of stylesheets”. The real cause is the source order in which these rules are declared. When two CSS rules have the same specificity and belong to the same level as they do here, the rule declared last is applied. Weinman only needed to swap his link and style tags to view his paragraph in the color specified in his .css file.

His code is:

<head>
  <title>CSS Examples: Style Sheet Levels</title>
  <!-- In external.css we have p.intro { color: black;	} -->
  <link rel="stylesheet" type="text/css" href="external.css" />
  <!-- AFTER so text will be blue -->
  <style type="text/css" media="screen">
    p.intro {
      color:blue;
  }
  </style>
</head>

Blue text.

That's confirmed in Firebug.

If he had swapped link and style tags, the rule in the CSS file would have “overridden” the one in the style tag:

<head>
  <title>CSS Examples: Style Sheet Levels</title>
  <!-- BEFORE -->
  <style type="text/css" media="screen">
    /* same specificity as in stylesheet */
    p.intro {
      color:blue;
    }
  </style>
  <!-- In external.css we have p.intro { color: black;	} -->
  <!-- This comes after so it's applied, text will be black. -->
  <link rel="stylesheet" type="text/css" href="external.css" />
</head>

Black text.

That's confirmed in Firebug.


Conclusion:

There are only 2 levels: in head vs inline.
What's in a style *tag* has as much weight as what's in an external stylesheet.
If 2 rules have the same specificity and belong to the same level, order matters, latest rules.

Naming convention for id and class attributes

Bill Weinman uses camelCase for his id and class attributes because he claims you can only use alphanumeric characters here, and he doesn't like to separate words with an underscore, and that's his “personal preference”.

The alphanumeric bit isn't true. You can use any of these characters: [A-Za-z][A-Za-z0-9:_.-] for class and id attributes, in both XHTML and HTML 4.

Most designers use the dash to separate words:

<div id="main-content">

Bill Weinman prefers camelCase:

<div id="mainContent">

Both ways are valid.

Note: Rails' HTML helpers use the underscore, which is also valid.

From the W3C specification: id and name [and class] tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

Rules that are too specific hurt reusability

Bill Weinman pretty systematically uses selectors that begin with the id of a specific region on the page. Also, he often adds tag name to his id and class selectors for no reason. Like so:

/* ====- main content ===== */
 
#content div#mainContent {
    ...
}
 
#mainContent p {
    ...
}
 
#mainContent h1, #mainContent h2, #mainContent h3, #mainContent h4 {
    ...
}
 
#mainContent h1 {
    ...
}
 
#mainContent h2 {
    ...
}
 
#mainContent h4 {
    ...
}
 
#mainContent ul {
    ...
}
 
div#youtubeVid {
    ...
}
 
/* ====== main content left menu ====== */
 
#mainContent p.leftMenu {
    ...
}
 
#mainContent p.leftMenu a {
    ...
}
 
#mainContent p.leftMenu a:hover {
    ...
}

Weinman does define a few global styles near the beginning of his stylesheet, but clearly not enough. Through his stylesheet, he repeats himself ad nauseum, redefining again and again the font-family, font-size, and color properties for his elements. What happens if some day someone changes the “left menu” container to a ul? Why use this:

#mainContent p.leftMenu {
    ...
}

When the following is flexible and reusable:

.horizontal-menu {
    ...
}

Conclusion

“Although long selectors that follow the structure “grand-parent parent child” are more readable, their specificity make them less reusable, and they also make a web design less flexible.” — moi

About object-oriented CSS

Nicole Sullivan, the woman who coined the expression “Object-oriented CSS”, gets it. Unfortunately, this Nettuts tutorial does not.

Lists in Internet Explorer: not a bug. Just different browser defaults.

Bill Weinman claims there’s a bug in Internet Explorer that’s never ever been fixed. Bill Weinman uses the following CSS, and complains that it looks all wrong in IE:

#sideBar ol {
  margin: .5em 0 1.5em 0;
}

Not enough space on the left in lists in IE

However, if you were to apply a left padding of zero to the list, it would begin to look “funny” in Firefox as well. Look at that:

Not enough space on the left in lists in both browsers

Weinman should have reset the padding around his list to 0 for the space on the left to become the same across browsers. Why?

Firefox's default styles adds padding to the left of lists.

He should apply some sort of reset first, and only then pick a left margin:

#sideBar ol {
    margin: .5em 0 1.5em 2em; /* Adding some margin to the left */
    padding: 0; /* Resetting the padding all around */
}

The space on the left of the list is the same across all browsers now:

The space on the left of the list is the same across all browsers now.

But the author doesn't do this. He doesn't reset anything and picks a left margin that's a compromise. The compromise makes his list look sort-of-okay-but-not-great in Firefox and Internet Explorer.

(Ideally, we place our reset rules inside a reset.css file, and we import that file inside our main stylesheet using @import.)

Conclusion

Each browser has its own default styles, and that's okay, it is not a bug. To avoid discrepancies across browsers, it's best to use a reset.
Last edited by Caroline Schnapp about 4 years ago.

Comments

Very thorough review

Caroline, I think you would do well in CSS and JS screencasts. This review is very thorough and informative for a screencast that is teaching thousands improper methods and rules.

Thanks for the review and the corrections.

Thank youuu Mark

Hellooo!

I would love to do screencasts. It is actually part of the stuff I have to do as an employee of Shopify.

Nice review, excellent follow through

Hi Caroline,
We've talked through Shopify support, but I wanted to commend you here for your thoughtful follow through of your assertions. Rather than simply bash a course as inadequate, you do a nice job of pointing out the errata, demonstrating them, and clearly showing an alternative explanation. Readable, not particularly inflammatory, and very useful. ;-)

PS. Love your style (CSS and graphical detailing) on your blog.

Thank you!
Andrew

Thank you Andrew

Your words are very kind :)

Thank you!

I thought lynda.com was a good resource...

I especially liked the OO reminder, need to refresh my strategy.

Thanx again!

Mihaela

Good stuff there

Good stuff there and I just wanted to give you a quick heads up. The contents in your article seem to be running off the screen. I’m not sure if this is a formatting issue or something to do with browser compatibility but I thought I’d post to let you now. The layout look great though Hope you get the issue resolved soon.

Attractive post. I just

Attractive post. I just stumbled upon your website and wish to say that I have really enjoyed analysis your website posts. Any way I'll be subscribing to your website and I expect you post again shortly.

Yes, it looks like you need

Yes, it looks like you need to provide additional explanations for this application to apply. Because not everyone who wants to use this application have advanced in the field of computer programming.

Nice post. I have been

Nice post. I have been searching for articles about valves and actuators and your post really helps. Thanks a lot for posting this. Next month I am going to be on my holidays in Dubai I try to use these tips in it

For vehicle owners, it takes

For vehicle owners, it takes less than 25 minutes to drive to the business hub and vibrant Orchard Road shopping district via Ayer Rajah Expressway (AYE).
A wonderful and unique lifestyle awaits you. Please see J Gateway project details and units available for more information.
J Gateway

Great Writeup.

Great blog. hope to read more from author. Jewel At Buangkok | Corals at Keppel | Jewel @ Buangkok

Awesome. Great Article.

Buangkok Condo A very awesome blog post. We are really grateful for your blog post. You will find a lot of approaches after visiting your post. I was exactly searching for. Thanks for such post and please keep it up. Great work. ... Jewel At Buangkok | Jewel @ Buangkok | Corals at keppel bay

you do a nice job of

you do a nice job of pointing out the errata, demonstrating them, and clearly showing an alternative explanation.
http://www.braungresham.com/2013/05/tip-3-owners-of-rural-land-should-claim-all-their-homestead-rights-if-they-live-on-their-land/

A wonderful and unique

A wonderful and unique lifestyle awaits you at Woodlands. Please see Forestville EC project details and floor plans for more information.
Woodlands EC

Great Article

So nice sharing. I’m glad to read
Thanks to author.

Amazing Job

I really Appreciate the time that author has taken for this article
Keep posting.

Isaac

Your blog article is very interesting and fantastic, at the same time the blog theme is unique and perfect, great job. To your success. One of the more impressive blogs I’ve seen. Thanks so much for keeping the internet classy for a change.
Isaac

the best writers

Dissertation or thesis writing can be the most difficult assignments you ever deal with.the best writers

Create a new life

I have been searching for articles about valves and actuators and your post really helps. Thanks a lot for posting this. Next month I am going to be on my holidays in Dubai I try to use these tips in itCreate a new life

corporate accommodation

I was able to find the details that I was searching for. I must thank you for the initiatives you have made in writing this article. I am expecting the similar best efforts from you in the future as wellcorporate accommodation

There are several careers to

There are several careers to choose from. You have to focus on the type that suits the particular discipline you read in school. You have to make your decision on time as you go about looking for a suitable job.

cheaponlineshoppingguide.com

Shopping deals for every buyer.Lots of promotions online. Best way to save money - shop on promotions.

christmasresortpackages.com

The risky side to this is that there are no guarantees of payment, and you must either have a great story or be a great writer to make this work. Not impossible, just tough. 

commonlawrights.eu

This is from English common law which made a man's home sacrosanct. It should still be true. It requires officers to have warrants to enter a home.

financialadvisertips.com

Most people have no choice about paying their tax through Pay As You Earn and it is a welcome development that those who evade tax are seen to face the consequences.

Really

CSS3 has changed the world for designing the website. All flash websites are now redeveloping using CSS3
It has became alternative to Flash.

Trolley

Yes CSS3 has become alternative to flash design which cost high for to design website.

CSS is important.

yes. CSS is very important element in web design. sengkang ec

Promotional gift company

Most people have no choice about paying their tax through Pay As You Earn and it is a welcome development that those who evade tax are seen to face the consequences.
Promotional gift company

yes its important.

CSS is such an important element and we can't miss out such details or else we would have been in trouble. executive condominium

Arabic English Translation Dubai

Hello, i think that i saw you visited my web site so i came to _return the favor_.I'm attempting to find things to enhance my web site!I suppose its ok to use some of your ideas!!Arabic English Translation DubaiTranslation company DubaLegal Translation Agency DubaiArabic English Online Translation

Exactly how may you write

Exactly how may you write something like this it was not the best blog on the topic and your opinions on the subject matter provide this subject matter a bad name. Spring Manufacturers Compression Springs Torsion Spring Helical Springs Spring Manufacturers in India Industrial Springs Manufacturer Umbrella Springs Manufacturer Conical Springs

You're so cool! I don't

You're so cool! I don't think I've read anything like this before. Thanks for your personal marvelous posting! I actually enjoyed reading it, you will be a great author. I will always bookmark your blog and will often come back in the future. Aluminium ladder FRP Ladder Extension Ladder Ladder Trolley FRP Grating Junction Box Transmitter Enclosure

Excellent" is the perfect

Excellent" is the perfect word that I can for your post. I will come back again to read more of your outstanding works. Thanks. http://teenreplica.com

Great Jib!!

Thumbs up guys your doing a truly terrific job!!!

Thomson One | Thomson Two | Thomson Three | Thomson Four | Thomoson Five

woods1 | woods2 | woods3 | woods4

Gla1 | Gla2 | Gla3 | Gla4
Tem1 | Tem2 | Tem3 | Tem4

I really like your post.

I really like your post. It's very captivating and entertaining to read. Please keep on producing high quality blogs. Thanks!

I really like your post.

I really like your post. It's very captivating and entertaining to read. Please keep on producing high quality blogs. Thanks!
http://guocolandtp180.org
watch tp180

Delaying outreach to

Delaying outreach to customers and the service providers was one risk. Another was that they could spend time competing for the prize and then fail in public. http://howtoreducehairfall.in/

New Launches

This is a nice post in an interesting line of content.Thanks for sharing this article
by The Skywoods Condo
The Skywoods
The Skywoods
The Skywoods @ Dairy Farm
The Skywoods
The Skywoods @ Dairy Farm

Hmm… I read blogs on a

Hmm… I read blogs on a similar topic for Modifikasi Motor Vixion, but i never visited your blog. I added it to favorites and i’ll be your constant reader. and Took me time to read all the comments, but I really enjoyed the Tempat Wisata article. It proved to be Very helpful to me and I am sure to all the commenters here! It’s always nice when you can not only be informed, but this My Games also entertained!

What a blog post!! Very

What a blog post!! Very informative and also easy to understand. Looking for more such comments!! Do you have a facebook? I recommended it on dig. The only thing that it’s missing is a bit of new designReal Estate Software Construction Software real estate management software erp for real estate Construction Management Software Real Estate CRM Software Real Estate ERP Software Real Estate CRM Real Estate ERP

The Panorama facilities

The Panorama facilities provide full family entertainment needs for your family and loved ones. Indulge in a serene and tranquil lifestyle right in the heart of Ang Mo Kio. The Panorama at Ang Mo Kio Ave 2

Abu dhabi web design company

Really very informative blog about the drupal. The full blog is very descriptive about each and every step in the Drupal. This blog also explained about the social media modulus that came to know through this blog after a long search. Website design company Abu Dhabi

Sky Vue Condo is right next

Sky Vue Condo is right next to Junction 8 Shopping Centre as well as the buzzling Toa Payoh and Serangoon area. Entertainment for your loved ones and friends is therefore at your fingertips with the full condo facilities as well as the amenities around Bishan. Skyvue Bishan

I feel really happy to have

I feel really happy to have seen your webpage and look forward to so many more entertaining times reading here. Thanks once more for all the details.AC Repair in Mumbai
AC Maintenance Contract
AC Servicing
AC Dealer in mumbai

i've tried to learn about

i've tried to learn about stylesheet or many time, buat
what a shame, i can't understand it.

Ferrox NVL
Ferrox Mio J, Mio Soul GT, X-Ride
Filter Ferrox Motor
Filter Ferrox Mobil
XCS3

The Best Community Out There

I found this community and i enjoyed reading the threads please visit them and you might learn more

The LucidIre Community Ltd.

Great Post.. Knowledge is

Great Post.. Knowledge is Power..
Free hold condo at kovan area, visit us now!!
Wait is over..
Tembusu Kovan | Tembusu Wingtai | Tembusu Condo

Living among Lush Greenery, near new hillview mrt
skywoods dairy farm | skywoods condo

Exciting new project at Thomson, near new thomson line MRT
thomson three | bright hill condo | uol brighthill

Luxurious district 10 condominium by renowned developers
mon jervois | jervois condo

3mins walk from buangkok mrt, near shopping malls and amenities
jewel buangkok | jewel cdl | cdl buangkok

alex residences | redhill mrt condo | alexandra view condo

Pet Grooming Centres in Singapore

Basenjis are native to central Africa, where they are used to assist hunters by games such as antelope into a net. These dogs are good hunters and they hunt by scent and sight. Their prowess is matched by a determined and fearless in nature. A large part of its survival over the centuries steams by the value it has regularly brought to a tribal table. Basenjis

Rubber Grass Mats

These are made from original rubber which makes them very long-lasting. They are weather resistant and also make your playground appropriate for playing in almost every type of weather. The maintenance of these rubber grass mats is also very easy to do and can be done in matter of minutes.

This blog post really

This blog post really grabbed my attention. With that said I am going to subscribe. Therefore I will get more updates on what you have to say. Please keep writing as I want to learn more. Emergency lights manufacturers || Addressable Central Battery Emergency Lighting System

This blog post really

This blog post really grabbed my attention. With that said I am going to subscribe. Therefore I will get more updates on what you have to say. Please keep writing as I want to learn more. Emergency lights manufacturers || Addressable Central Battery Emergency Lighting System

This blog post really

This blog post really grabbed my attention. With that said I am going to subscribe. Therefore I will get more updates on what you have to say. Please keep writing as I want to learn more. Emergency lights manufacturers || Addressable Central Battery Emergency Lighting System

All flash websites are now

All flash websites are now redeveloping using CSS3 It has became alternative to Flash. Build Biceps without Weights

informative post

very well-written post and useful especially for those who do programming or CSS. This is definitely an added information to my knowledge and will surely use it someday. Thanks!

active-domain.com

This is for me!

Been searching all over the internet about CSS and this is nothing than most of them. This has every detail that I would like to know about CSS. Although not all, but most of the important things are here. Thank you

Megaton Pte Ltd

CSS

I agree with what you are trying to say about these CSS best positioning practices especially when it comes to the tutorials. A even learned more with what you explained here than the tutorials.

www.waikayphotography.com

Very informative

I'm still new to computers and programming. I'm usually confused when I see posts like this but fortunately, I understand most of the things here. However, I would like more CSS tutorials from you please.

active-venture.com

CSS best tutorial is here

This post might not teach me the first and last things that I should think of when it comes to CSS but it certainly has the important things here. True that there are a lot of CSS tutorials which are just crap but this post is awesome.

warehouse

Not getting everything

I know I'm not that good with CSS but I don't get some things here. First things first, are those CSS best practices tutorials you mentioned mostly not good?

www.commonwealthtowers.com

Still Learning

Just Blog Walking Thanks for the tutorial..GBU

dfrtyyy

Great !! Thank you for this beautiful Artiicle friend

Post new comment

The content of this field is kept private and will not be shown publicly.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <css> <html> <javascript> <mysql> <php> <span> <a> <b> <i> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <sup> <sub> <dd> <del> <blockquote> <img> <q> <p> <div>
  • Lines and paragraphs break automatically.
  • You can enable syntax highlighting of source code with the following tags: <css>, <html>, <javascript>, <mysql>, <php>, <rails>, <ruby>.

More information about formatting options

CAPTCHA
I have to wonder if you're a human spammer or a machine, or less likely someone who cares to leave his or her thoughts behind.