Hi. I'm Andrew

Filed under: bookmark

See all posts on posterous with this tag » 

What goes wrong with CSS

  1. CSS grows with site size. Depending on your site, this can be a serious issue — not just for performance, but because CSS is code. More code tends to lead to more problems — maintaining code size is a serious concern.
  2. CSS best practices encourage what would otherwise be bad programming: repetition, bad grouping, loose coupling. Again, if you treat CSS as code that needs to be maintained, reviewed, and refactored, these are negatives.
  3. CSS is often contextually unreadable. For example,.about .main ul li li amight be very clever CSS, using a nesting in the markup to trigger a style, but it’s very bad code — without a strong understanding of the HTML, this code can be ambiguous, and its HTML target hard to pinpoint.
  4. CSS encourages overrides, which are the death toll for maintainability. The more styles you override, the more styles you will eventually have tooverride again.
  5. CSS encourages bad coupling and distant dependencies — for example, let’s say all LIs inherit a margin-bottom we set early in the CSS, and the features we code design with this spacing in mind. Despite the fact that the art director says a particular feature MUST look the way the comp looks, said feature now depends on a very remote line of code, a line that anyone might change without realizing the consequences.

Found at Viget.com, CSS Strategy Square-off.

The approaches highlighted, OOCSS & SMACSS, in the article are also what I consider to adapt going forward with CSS development/authorship. 

 

Filed under  //   best practices   bookmark   css  

Comments (0)

Scalable and Modular Architecture for CSS

SMACSS (pronounced "smacks") is more style guide than rigid framework. There's no library within here for you to download or install. SMACSS is a way to examine your design process and as a way to fit those rigid frameworks into a flexible thought process. It's an attempt to document a consistent approach to site development when using CSS. And really, who isn't building a site with CSS these days?! Feel free to take this in its entirety or use only the parts that work best for you. Or don't use it at all. I understand that this won't be everybody's cup of tea. When it comes to web development, the answer to most questions is "it depends".

Filed under  //   bookmark   css  

Comments (0)

Our Best Practices Are Killing Us

Untitled

Our Best Practices Are Killing Us via Slideshare

For years, we have been suffering with the myth that if we just tried harder, our CSS would stay clean. Each time we start a new project, we valiantly follow best practices and commit ourselves to writing beautiful code. Then, a few months into the project, we're once again faced with a mess. Maybe it was the contractor who committed crappy code? The project manager who would never give us time to refactor? The truth is that our best practices are killing us. In this talk, we will debunk the best-practice-myths that are making a mess out of our sites.
Nicole Sullivan @stubbornella

The flawed best practices.

What are those flawed best practices?

  • Classitis!
  • Never add an non-semantic element
  • Or, a non-semantic class
  • Use descendant selectors exclusively
  • Sites need to look exactly the same in every browser

 

There are a lot of points you can get from this slide. One point is that when I get around favoring ids over classes, I found it hard to override the CSS rules or selectors. Specifity becomes really hard to manage and on some point I'm relying so much on the !important derivative which is just the end of the game for overrides. I highly recommend front-end developers and web designers to read the slide and internalize the points it tries to convey.

Filed under  //   best practices   bookmark   css   presentation  

Comments (1)

How Green Is Your Internet?

Thanks to Mathew Wong for the link.

Filed under  //   bookmark   internet   video  

Comments (0)

Toughest place to be a Bus Driver

London bus driver Josh West heads to Manila, the world's most densely populated city, where, with his host Rogelio Castro, he braves the chaos of the streets in a Jeepney.

Filed under  //   bookmark   random   reality   video  

Comments (1)

Jason Fried: Why work doesn't happen at work

 

Filed under  //   bookmark   video   work  

Comments (0)

CSS Browser Selector

CSS Browser Selector is a very small javascript with just one line which empower CSS selectors. It gives you the ability to write specific CSS code for each operating system and each browser.

USAGE

1. Copy and paste the line below, inside <head> and </head> tag

<script src="css_browser_selector.js" type="text/javascript"></script>

2. Set CSS attributes with the code of each browser/os you want to hack

Examples:

  • html.gecko div#header { margin: 1em; }
  • .opera #header { margin: 1.2em; }
  • .ie .mylink { font-weight: bold; }
  • .mac.ie .mylink { font-weight: bold; }
  • .[os].[browser] .mylink { font-weight: bold; } -> without space between .[os] and .[browser]

Available OS Codes [os]:

  • win - Microsoft Windows
  • linux - Linux (x11 and linux)
  • mac - Mac OS
  • freebsd - FreeBSD
  • ipod - iPod Touch
  • iphone - iPhone
  • webtv - WebTV
  • mobile - J2ME Devices (ex: Opera mini)

Available Browser Codes [browser]:

  • ie - Internet Explorer (All versions)
  • ie8 - Internet Explorer 8.x
  • ie7 - Internet Explorer 7.x
  • ie6 - Internet Explorer 6.x
  • ie5 - Internet Explorer 5.x
  • gecko - Mozilla, Firefox (all versions), Camino
  • ff2 - Firefox 2
  • ff3 - Firefox 3
  • ff3_5 - Firefox 3.5 new
  • opera - Opera (All versions)
  • opera8 - Opera 8.x
  • opera9 - Opera 9.x
  • opera10 - Opera 10.x
  • konqueror - Konqueror
  • webkit or safari - Safari, NetNewsWire, OmniWeb, Shiira, Google Chrome
  • safari3 - Safari 3.x
  • chrome - Google Chrome
  • iron - SRWare Iron new

Extra Codes:

  • js - Will be available when js is enable, so you can show/hide some stuffs

INSPIRATION

Original idea by 37signals.

http://37signals.com/svn/archives2/browser_selectors_in_css.php

There's a related post over at 45 Royale. It's however the first result when I searched for this solution. This is quite a handy tool because every operating system's implementation on every browser are different in terms of font rendering. Pretty much perfect for my need.

Filed under  //   bookmark   browser   css   selector  

Comments (0)

Do websites need to look exactly the same in every browser?

Comments (0)

Universal Internet Explorer 6 CSS | for a beautiful web

How do you answer the Internet Explorer 6 question?

  1. Design for better browsers, then design alternative solutions to handle IE6 bugs?
  2. Write a remedial IE6 stylesheet to address layout issues?
  3. Use JavaScript to bootstrap CSS support in IE6?
  4. Make your site look exactly the same in IE6 as in any other browser?
  5. Develop to better browsers and spend no development time or testing for IE6?
  6. Block IE6 users from seeing your site's styles?
read the rest of the post via forabeautifulweb.com

 

Filed under  //   bookmark   css   ie6   modernweb   web standards  

Comments (0)

Why tables for layout is stupid: problems defined, solutions offered


photos credit: http://www.hotdesign.com/

Tables existed in HTML for one reason: To display tabular data. But then border="0" made it possible for designers to have a grid upon which to lay out images and text. Still the most dominant means of designing visually rich Web sites, the use of tables is now actually interfering with building a better, more accessible, flexible, and functional Web. Find out where the problems stem from, and learn solutions to create transitional or completely table-less layout.

Overview: What’s in it for me?

We'll give you an introduction to a way of working that will

  • make your pages load faster
  • lower your hosting costs
  • make your redesigns more efficient and less expensive
  • help you maintain visual consistency throughout your sites
  • get you better search engine results
  • make your sites more accessible to all viewers and user agents
  • and give you a competitive edge (that is, job security) as more of the world moves to using Web standards.

We'll also talk about how laying out pages with Cascading Style Sheets (CSS) requires a slightly different way of thinking about your content and your markup than you may be used to.

The problem with using tables:

  • mixes presentational data in with your content. (This makes the file sizes of your pages unnecessarily large, as users must download this presentational data for each page they visit. Bandwidth ain't free. )
  • This makes redesigns of existing sites and content extremely labor intensive (and expensive).
  • It also makes it extremely hard (and expensive) to maintain visual consistency throughout a site.
  • Table-based pages are also much less accessible to users with disabilities and viewers using cell phones and PDAs to access the Web.
Enjoyed reading this post. Very informative. A plus points to Web Standards.

Filed under  //   bookmark   tables   web standards  

Comments (0)