Neatly Sliced

I've posted previous tips for CSS conventions, such as using semantic id and class names and keeping your selectors lower case. What about within our styles, between those curly braces? What convention can we apply to our properties?

According to W3Schools, "CSS syntax is made up of three parts: a selector, a property and a value", such as #selector{ property: value;}. Now there are a ton of CSS properties, so we really ought to adopt a convention for writing these out to keep ourselves and our coworkers from tearing out our hair.

I propose we begin alphabetically ordering our CSS properties (if we're not already, of course). Now, I’m not saying to be dogmatic about alphabetizing (ahem, everyone, each font property must be alphabetically listed! I don't want to see font-weight before font-size!) but just in general, group for example the font properties together and list then in alphabetical order in relation to the other properties.

Why would this be useful? Well an obvious reason is that you can quickly find what you are looking for, but another (and more important) reason lies in that it will reduce overriding errors.

Below is the style for a menu that I pulled from a third party:

I needed to paste in font-size and color, so I pasted those two over the existing font-size and above the font-weight that already existed:

Since this was not my CSS, I did not notice at first that the color property was already declared later in that very selector. The result in this instance would be my #fff8f1 would be overridden with #fff because the latter rule (selector or property) takes precedence.

While I was alphabetizing this selector, I noticed the other color and of course deleted it. In addition to preventing override errors, alphabetizing the properties also just gives the selector a feeling of order and organization.

Advice of a different order: Andy over at Aloe Studios suggests ordering properties in a way to mirror the property's effect on the box model. It confuses my simple non-design developer brain, but perhaps designer-heavy CSS developers find it more semantic for their heads. If it works for you, do it!

Like what you've read? Browse the CSS category for more CSS goodness, and be sure to subscribe to the RSS feed. It's free!

Popularity: 28% [?]

An Event Apart 2008, Day 2, 5:00pm - 6:00pm

Read the previous talk in this series, Designing the Next Generation of Web Apps by Jeff Veen, or view An Event Apart’s Table of Contents

A Panel Apart

Eric Meyer, Jeffrey Zeldman & Special Guests (Jeff Veen and Cameron Moll)

• Take ownership of browser standards? Everyone is like, uh, what? 
• W3C has nothing going on right now: Eric Meyer and Jeff Veen
• Eric: JS is the only way that we're going to get advanced CSS3 standards
• JZ: being a part of the w3c is kinda weird, because it's so time consuming, you would need a company to pay you to work at the w3c, but then you wouldn't be into design anymore because you've spent so much time with w3c. Then, you'll be discouraged because there is so much overhead involved in being a part of it, hatemail, mailing lists, it's like going to the DMV. (not verbatim, in my own words)
• What defines an image from being content apart from presentation?
• EM: if I would need alt text for it, then it's content, otherwise presentation because decorative. "If I need alt text so that Google can pick it up, then it needs to be content"
• JZ: like Cameron Moll's site, the flourishes would be presentational content
• Do you have any advice about designing for phones?
• CM: Ask the boss about the need for this. What is the need? Don't go build some mobile web piece because it's the next big craze, but what will people need? People with blackberries aren't going to want to be browsing like an iphone user will. 
• JZ: Does it need to be exactly the same as the site? Does it need to be like NYTimes design that makes it easy to browse and look at articles? Do you want it like Flickr where you just need to see recent activity, see a few basic things? Most the cool things with Flickr happen with Ajax that a real web browser is required, so you don't want the same behavior. Thus, there is a simpler UI. Let's make the phone have maybe a different experience, maybe there's a call to action on the phone, and take away the rest of the website. A call of action could be more important than making it look pretty on the phone.
• JV: got off the blue line and couldn't remember how far the Sheraton, and they didn't even have the address on the home page. Silliness. This is a perfect time to make a phone version.
• How do you deal with not having a copywriter?
• JZ: Happy Cog does content development and IA at the same time, they sneak in copy, unless the client understands that on his own. Good writing makes good interface, they make it part of the IA so they can have clean, good, happy copy. Happy cogs
• Know yourself, your strengths, who the users are, and what KIND of language/reading level/existence of humor/etc. Client may realize that THEY CAN'T write that and so they'll want a writer then. They put it IN their budget.
• CM: He would just slip those things in wherever possible, and it usually went live that way. Now in house, they have an entire translation department.

This completes the An Event Apart 2008 notes series. View the Table of Contents to ensure you have completed your reading.

Popularity: 8% [?]

An Event Apart 2008, Day 2, 11:00am - 12noon

Read the previous talk in this series, Design Lessons in Chess by Rob Weychert, or view An Event Apart’s Table of Contents

Implementing Design: Bulletproof A–Z

Dan Cederholm

• Craftsmanship: Vermont is craftsmanship by nature. Why? Your impression of Vermont... "I think of a guy with a beard building something, a human behind the design, not a factory."
• "When something is well-crafted, it reflects that a human was behind its design."
• The browser landscape is changing - it is a time to embrace progressive enhancement (for JS) and progressive enrichment (for CSS).
• These items will be referencing his demo site, http://icedorhot.com
• A: Anchor links with meta information (a bulletproof example)
• Screenshot of popular drinks box from slide (10_populardrinks)
• a display block and use floats to keep things appropriated 
• B: Border-radius (progressive enrichment)
• border-radius is promised with CSS3, yay! (in 2000 years :/)
• Vendor-specific solutions of the -webkit and -moz options
• Layer background images and border radius with clip the background image so that it does not exceed past the rounded section, maintaining the rounded corner.
• Firefox2 not as great support for that clipping of rounded corner, so it's a little bit of aliasing, but so it goes. It looks ok in FF2 if contrast is low enough.
• He puts these things in an enriched.css, so has border-radius and the webkit and moz styles in there, and only cool browsers use them.
• What about uncool browsers?
• Well, they get square corners. Tough cookies, still workers. That's ok and that's good. It degrades wonderfully. It affects the design in minimal ways.
• Great for prototyping before carving the images out.
• C: Color transparency with RGBa (progressive enrichment)
• Hovering over the city makes it semi-transparent with temperature (screenshot)
• opacity sets the value for the element AND all its children, including the text, blek!
• background-color: rgba(0,0,0,.7) 0,0,0 is black, and .7 is the opacity, and there is no usage of png or any other deal. ¡Que bueno!
• Tiled png would reach more browsers, but rgba is great for prototyping before carving out final images.
• D: Do websites need to look exactly the same in every browser(.com)? No!
• D: Decision makers who get it.
• It's not the end of the world if some browsers don't get the opacity from rgba and if they have square corners instead of round. IE6 is still perfectly usable.
• The h1 headings in foamee.com have little flourishes right after and before the name. uses generated css content to generate the image: PERFECT USE OF CONTENT PROPERTY for :before and :after
• It's ok: tiny visual enhancements that do not affect the layout
• E: Easy-clearing floats (reexamining past methods)
• This is not what floats were intended for, but this is what we're dealt so we have to play it
• Dan likes the clearfix:after clearing method. 
• Dan tried what I do and made a big giant list of things and not adding the clearfix class (but too unmanageable)
• So instead he changed it to .group and it doesn't look as scary as .clearfix
• Then lists *+html .group: {min-height: 1px} and * html .group{height:1%;}
• IE8 will supposedly support generated content, wahoo!
• F: Frameworks
• He uses Meyer's reset.css and saved himself 155 times of writing margin:0 padding:0 for mtv.com
• Also in his framework he built he includes the IE6 filter png fix (* html #selector{ filter: progid.blahblahblah}) as well the clearfix.
• G: Gridlasticusness (bulletproof)
• Dan doesn't have a design background, so he's been learning about web design as he's going.
• Implemented grids on simplebits
• Each grid will have em value
• Em-based layouts force you to ensure ultimate flexibility
• Em/pixel values make more sense when using the 62.5% method - end up with a base ten emming math reference. 
• Ems should also be used for margins, borders, etc as well.
• Avoid setting font-size and width on the same element - gets confusing and you throw off your base. The calculated width is going to be different once you change your font-size.
• Adjusting font size can throw off your grid too.
• Set a max-width if using ems on elastic layouts!
• Think modular - don't get overwhelmed by so many sections. Partition your sections.
• H: Horizontal grid. sure. vertical grids? Kind of. 
• Be realistic about what's going to happen. Make lines jagged, put different lengths of content there so that it looks realistic and they know what to expect. (Screenshot of "everything is just fine here")
• Use groupings so that things are grouped and at least sections have the same tops
• I: IE8 still refuses to resize text set in pixels (reexamining past methods)
• Say what?
• Dan logged a bug, and they closed it right away without even opening or validating it or posting a workaround. 
• He's still using ems because of that.
• Page zoom is there, does this eliminate our issue of font-size? No, because the text size is still there. Dan uses text size quite a bit and his eyesight is decent.
• J: jQuery. 
• He's never talked about Javascript in a talk before, but he's just that excited about jQuery that he's bringing it in here.
• He's just expressing his love for it.
• K: Kitty (kitty screenshot)
• L: .last (bulletproof)
• Simple way? Just add the last class with jQuery $("ul.lst li:last").addClass("last");. Sooo, that may not work without JS disabled, but your site will still work and it's just a presentational thing.
• M: Must skip a few letters if we're going to get through this
• N, O, P, Q, R...
• S: Shifting backgrounds
• Silverback's layered pngs and http://therissingtonpodcast.co.uk
• Position background with a -80% or other - percentage. 
• http://www.thinkvitamin.com/features/design/how-to-recreate-silverbacks-parallax/
• T: Today's MacBook release... MacBook Sun(tm), in ten minutes, it's going to be huge.
• U: Ur stats.
• "When can we ___?"
• "The answer is simple: when your site's (or sites' if you have more than one) user logs tell you that you can. Not before then. The user stats from other sites, or from global-aggregation surveys, are worse than useless." - Eric Meyer
• If you've got all IE6 users, may not want to do border-radius and other stuff
• Etc, etc. Listen to your user stats. Don't care what other people do, because you've got to look to your audience.

View the next talk in this series: The In-House Designer by Cameron Moll, or skip to An Event Apart’s Table of Contents

Popularity: 9% [?]

An Event Apart 2008, Day 2, 8:30am - 9:30am

Read the previous talk in this series, Special Adobe Session: Web Workflow with the Adobe Creative Suite by Adam Pratt, or view An Event Apart’s Table of Contents

Eric Meyer Live Code Workshop

Eric Meyer

In this talk, Eric will be going through CSS questions and websites previously submitted by An Event Apartniks.

• http://www.stratom.com
• Dropdown menus... "Are those coming back and I didn't hear? Because last time I heard, that wasn't so good." - Eric Meyer
• menus: <li><span><a> - span had a background image, but li had none. Why not just take out the span and put that background image on the li?
• "Spanitis" 
• <div id="menublock"> is wrapping the menu ul - why? Just put menublock on the ul. Not everything needs a container!  Sometimes just the element can contain itself!
• https://mms.mckesson.com/html/main.menu.mck... macdeek?
• A lot of px sized text. Tsk tsk tsk. It's no longer a real issue though, now with the death of IE6 (IE6 is dead woohoo! Also more implementation of position: fixed is another sign of its death . "The death of IE6 does not mean that it is dead for you." - Eric Meyer
• <p class="p"> Stop! <p class="topnews"> I can get, but ="p"? Stop! Inheritance!
• .mck files: incorporating branding into your file extension. Why not?
• No background-color included for html, body. Tsk tsk.
• Everything done in px is asking for trouble. If you're going to use px, set the body to px, and then use percentages for everything else. Relative font-size is not going away. Set a baseline. Setting px on everything is the same problem as setting font-family on everything. A change is a big headache.
• li background-image: good for bullet replace, but put the background-image on the a element so that you can have a rollover without having to use JavaScript.
• overflow: auto magically makes floated elements expand to take up the height of their children. Sometimes have issues with scrollbars being invoked by browser, but magic. Eric hasn't been able to have anyone explain to him why this works, but it does.
• http://www.delta.com
• A lot of style attributes on the markup. You're combining style and markup, which we spent the better part of a decade trying to get away from. Try your best to eliminate inline styles.
• The "Book a Trip" section should really be a table - arguably, it is a data form where your data has yet to be filled in by the user. This begs the question, are all forms tables?
• Why does Eric use tables over dls or whatever? The semantics are a very subjective thing. He does whatever is most pain-free, so sometimes OL, sometimes DL, sometimes a table.
• Firebug input a -x-system-font: none; in the CSS, that doesn't actually exist in their CSS. -x-blah is probably from Firebug and not from the actual CSS.
• "Using floats for layout is a hack." - Meyer
• http://www.tablethotels.com
• Use shorthand CSS declarations so that your CSS is smaller, easier to manage, etc. Don't keep it separated!
• The form as a lot of divs... 
• He has a hard time for getting irritated with form markup because of what he was saying to me earlier about it being so subjective and dependent on the developer's feeling of semantics for that form.
• http://forwardlymphoma.org
• If something has an alt text of " ", then why is it not a background-image? 
• <img> of a sphere, then <img> of a button text "Donate", and both were alted to "Donate" "Donate", annoyance for a screenreader. Just have alt text of sphere be "", or even better make it the background-image.
• overflow:auto to have scrolling sections (the look of frames) may be getting more popular in the future! The bad thing with frames is that there are a million files all over the place, not the scrolling thing. 

View the next talk in this series: Design Lessons in Chess by Rob Weychert, or skip to An Event Apart’s Table of Contents

Popularity: 6% [?]

An Event Apart Day 1, 9:45-10:45 am:

Read the previous talk in the series, Understanding Web Design by Jeffrey Zeldman, or skip to the note's talk Table of Contents

• CSS for accessibility checking
• You can set up safari to use a debug stylesheet
• Example of his personal debug.css
• Hilight the things that you do NOT want, that are not supposed to exist:
• Empty checking
• div:empty, span:empty, td:empty, etc.
• Note, these things are not supported by IE, but who cares because this is a development purposed stylesheet
• Really nice if the CMS isn't pouring stuff into the HTML like it is supposed to.
• May be generating LIs that are completely empty - never notice them if hiding bullets, but there you go.
• A CMS with a "rich text editor" - see what this evilness has pushed in. Those love to generate empty Ps.
• Markup that shouldn't be there
• *[style], font, center{ outline:red 5px solid;} - these are invalid/not good practices. Point them out and then manually address them.
• Also *[class=""], *[id=""]. Want to be able to catch these.
• Important to keep your code clean. Take pride in your work, just like in HVAC you want to keep it pretty even though it's behind a wall, the same here. No one will see it, but have pride.
• Image cleanup
• img[alt=""] - blank attr
• img:not([alt]) - look for absense of alt
• outline - does not affect layout of the page. Not counted in width/height. It is drawn outside the border. Outlines are perfect for diagnostics, for hover in Ajax effects, etc. (Don't want your layout going like crazy on hover because you've added a border to hilight Ajax action)
• Table cleanup
• Your THs should have scopes:
• th[scope="col"], th[scope="row"]
• Links
• a[href]:not([title]) - check for title attribute existence.
• a[href="#"] - "when a href = octathorp(e)... yeah that's what I said. Because that's how I roll."
• Evidence that you've been naughty and not cleaned up your JavaScript. You want to have a fallback for your links.
• a[href=""] - CMS or you have forgotten to fill it in.
• What if you can't develop in Firefox? What if you have to develop in IE7?
• Well fortunately, IE7 does support attribute selectors. But not not()... so you have to simulate.
• IE7 does not support the outline style.
• Give everything a border, and then as things are good, take them away.
• a[href]{border:5px solid red;}, and then a[title]{border: 0}, a[href="#"]{background:lime}, etc.
• Next section, checking for cleanness of code.
• div div div div div blah blah{outline}, because nesting too much can be just as bad as tables. Fix things, and for each subsequent section he increases the intensity of the color outline.
• form:not([action]) - there needs to be a real life action so that if no JS, they can still do something.
• *new thing* inputs cannot be direct children of the form element - it has to be wrapped by a block level element, like (or, specifically) a fieldset.
• Recap of his reset.css
• He admonishes us to personalize the reset.css.
• Make it less a reset.css as a reboot.css. Do the change once, in this document, than resetting and THEN rebooting
• Don't count on CSS for content generation-
• Don't use it for quottation marks - go ahead and turn the auto-insert off, but probably shouldn't use it.
• Don't use it for legislature and legal code and whatnot - could lead to lawsuits later. Point 1.2.5 will always be that, don't use CSS because that can easily change, and it won't appear in CSS disabled devices.
• NEVER turn off :focus, because you've made it insanely impossible for people who navigate by keyboard.
• Why the huge group selector rather than a *?
• Different browsers allow for styling for form elements, others don't. They often ignore stuff. Browsers very inconsistent in styling form elements. Soooo just ignore.
• It'd be nice to say *[not(form,input,textarea....)].. but not() can only have one element, not a group selector.
• Learned a few things / issues:
• font-size, font-weight, font-style, etc. for fonts: inherit is not supported by IE for windows.
• Plus, issues are caused of inheritance - everything is reset. so you reset the li, but the p, strong, span inside are set to that initial reset to line-height 1. Inheritance has been broken.
• background: transparent also causing issues with td in IE.
• IE will not apply the TR background to its children - it will just apply the reset background:transparent. Silliness. You'll have to say td, th background specific. This explains why the issues with background table colors in IE. Set the TD.
• If you use a CSS framework, it should be one that you built.

Read the next talk in the series: Storytelling by Design by Jason Santa Maria, or skip to the note's talk Table of Contents

Popularity: 8% [?]

Have you ever gone along coding your front end, adding multiple classes to a single element, and then stop to consolidate because you feared you added a class too many? I know that I have at least paused to reconsider. <div class="related bug show nojs"> just seems to be reaching the limits of what my browser could handle.

Well, fear no more. Using JavaScript, Kilian Valkhof has uncovered a relieving (and surprising) conclusion. I don't want to steal his thunder, but there is nothing to worry about; add all the classes you want.

Popularity: 8% [?]

Posh CSS is like kottke but for CSS articles. I love it. Feedreader it.

Popularity: 9% [?]