Skill level
4 Proficient

I have been working with CSS for 20 years starting at OnlineFocus. Based on my experience over the years, I've learned to use a rather strict naming convention for selectors based on purpose rather than style. I avoid both inline styles and the use of !important attributes. I use the CSS animation directives with easing rather than JavaScript whenever possible for things like accordion animations. (I've played with CSS 3-D transforms but have never used them professionally.) I'm also experienced at using @media, @screen and @print tags to create responsive layouts with different renderings for screen vs. printed output. (For example, if you print any page on this website, it will print black-on-white without search and navigation, as those features are useless in printed form.)

As for CSS file organization, I break things up into modules where the CSS, HTML and JavaScript files are all placed together in the same module subfolder. I also use CSS @import directives within CSS files to avoid having huge lists of CSS files appearing within the main HTML page. This approach lowers performance but the web app is easier to maintain. If a web app needs to be optimized for performance, I use separate build tools to minify and concatenate the CSS and JavaScript files together during production deployment.

I'm also experienced at using SASS (and the compass compiler) especially in connection with using the Angular and Ionic frameworks. I have not used LESS.

Experiences using this skill are shown below:

Prior Work

2002 — 2006
Zaun Consulting (self-employed) [Boulder Creek, CA]
Yahoo! Research Labs (research lab) [Burbank, CA]
The Burke Institute, (education foundation) [Santa Cruz, CA]