CSS Pet Peeve #17

Aug/21/2014

It's amazing how often I see something like this:

.btn-submit, .btn-save-changes, .btn-send-email, a.btn-see-addresses,
a.btn-see-cards, a.btn-see-order-history, a.btn-see-wish-list, a.btn-share-wishlist,
a.btn-add-new-address, a.btn-add-new-card, a.btn-share-your-wishlist,
a.btn-continue-shop, .btn-update, .btn-add-wishlist, .btn-tell-friend,
.btn-continue-blue, .btn-no-thanks, .btn-add-wishlist-blue, 
a.joinnow, .btn-check-status{
    background: url("../images/buttons_24.png") no-repeat;
    border:0 none !important;
    cursor:pointer;
    display:block;
    height:25px;
    line-height:25px;
    text-indent: -9999px;
}

First: don't do that. Using a comma to apply the same rule to different styles is fine if you have two, maybe three, styles where it applies. Doing it with this many styles is just absurd. Oh, and I've probably removed a dozen rules from this list already.

Second: This used to be all on one line. Also bad. I know guys who write their rules on one line a la

a.btn-see-addresses{width:135px;background-position:-1697px 0;}

One fellow I know who is a proponent of this style says he likes to being able to see lots of class definitions as he scans down the page. Another says he's usually looking at rules in Chrome dev tools and not the CSS file itself. This way his CSS is already compact and he can skip some kind of build tool to compress his CSS. To each his own, I guess, but I'm not a fan. I think they're really hard to read. Of course, either argument falls apart when you have so many class names on the line you can't even see the rules. I had no idea there was an !important in these rules until just now when I broke it into multiple lines. Which brings me to...

Third: If you have to use !important you've done something wrong.

Here's one way to tackle this particular issue.

.btn-sprite {
    height: 30px;
    line-height: 30px;
    border: 0;
    overflow: hidden;
    text-indent: 500px;
    display:block;
}
.btn-yellow {
    background: url("/images/btn-sprite-yellow.png") 0 0 no-repeat;
}
.btn-red {
    background: url("/images/btn-sprite-red.png") 0 0 no-repeat;
}
.btn-checkout {
    background-position: 0 0;
    width: 140px;
}
.btn-checkout:hover {
    background-position: 0 -30px;
}

<button class="btn-sprite btn-yellow btn-checkout"></button>

I find this much easier to read and maintain. There's nothing wrong with having more than one class on an element. I try and draw the line at three, but that's just me.

Browser Quirks

Aug/12/2014

Here's a new oddity between Firefox and Chrome that I haven't come across before. I've removed the logo in question because I don't know how the company would feel about having their logo on my web site. You'll have to take my word for it that the black line indicates the baseline of the logo on the page.

file

Notice how the menu renders one pixel lower in Firefox. Now the typical developer loaths pixel pushing and is likely to respond "One pixel? Pffft." The problem is when you have a line on the page—a margin of some kind, a font base line— the human eye will pick up that kind of thing and it does become distracting. There are a few situations where pixel pushing is appropriate. Here's the relevant CSS.

.htlink {
    position: relative;
    top: 36px;
    line-height: 24px;
    height: 24px;
    letter-spacing: .14em;
    text-transform: uppercase;
}

If you look a the computed styles in each browser you can definately see some precision differences in the letter spacing numbers displayed by each browser. It's not unreasonable to assume there are similar precision differences when calculating the pixel location of the text baseline. So what to do? Browser detection and Firefox specific styles? If that doesn't make you cringe, it should. In this case, however, there was only one minor tweak that needed to be done.

line-height: 23px;

That had the desired effect of moving the font up one pixel in Firefox, but leaving the font in place in Chrome. I think I just got lucky this time, but if you face a similar situation, you might try tweaking your line-height or other font property that would exploit the precision differences between the two browsers.

How not to write your CSS

Aug/06/2014
position:relative;
top:-8px;
padding-top:10px;

I just found this on a web site I've been asked to update. True story.

To Boldly Go...

Jun/26/2014

It seems like an eternity ago now, but my first "real" web development language was Java. I had done some dynamic-ish web sites prior to Java. I built a web interface to an anonymous FTP archive using shell scripts to parse description text files and assemble HTML. I started using Perl for some more sophisticated text parsing, but I was still working with flat files. I knew the next step was using a database, but that wasn't an option with Perl at the time. Java was getting a lot of press and it seemed like a good way to go. My first e-commerce site was build on a Solaris server using Apache and Tomcat and a MySQL database. If there was a Solaris equivalent of apt-get or yum, I hadn't heard of it. I downloaded sources and compiled my own. JSP was released in 1999. I continued to develop in Java and was getting into J2EE when the entire Utah office was laid off in 2003.

I ended up getting a job with a multimedia company that I was kind of excited about. Flash MX and AS3 had just been released and was the next cool thing. I thought I'd be getting the opportunity to get more into Flash development. I was wrong. I ended up being the company's only web developer working in...wait for it...ASP. I still feel dirty. I quit that job and started freelancing in 2006. Looking around at hosting options, PHP was by far the most ubiquitous. Java hosting was almost non-existent. So I made the jump to PHP and the rest is, as they say, history.

Now at my current job we have a web site that was built in Java years ago. How my company ended up supporting the site is a long convoluted story. How I ended up working on it is quite simple. Our Java guy quit and I was the only one who had any Java experience at all. It's been quite the headache. The site was originally developed on a proprietary framework. Essentially the purveyors of said framework said, "We're not interested in supporting you any more. Here's the source code. Now go away." I have a huge 300+ page training manual that is a fine testament to the pointless destruction of trees, but is otherwise useless. We don't even have all the source files. Despite the frustration, I find myself missing Java. Maybe it's just nostalgia, but I think it's the structure I miss. PHP is growing up and moving more in that direction, but there are still plenty of developers out there content to write code like it's 1999. I'm not saying Java is some magic bullet for crap code. You can write crap code regardless of the language you use. The memory problems I'm having with a cron from this Java site are a testement to that. I think I finally have fixed it so the garbage collector isn't thrashing, but it still doesn't manage memory very well. I digress. The point is, I'm feeling like I'd like to brush up on my Java skills.

I'm sure there are plenty who have gone before. Going boldy just means it's just time to jump in with both feet. My history with side projects isn't great, but I've been winding down other committments so hopefully I'll be able to make this work.

Catching up

Jun/01/2014

So after spending a few days getting old posts into Wardrobe, it has become apparent that I need to catch you up on a few things.

Slim

I just haven't had time to do much with it. Obviously I won't be using anything I've written for this web site. I still want to do something with Slim, but I'm not sure exactly what at this point. Hopefully I'll have time to work on personal projects soon.

Sublime Text

After a great start Sublime seems to have stalled. At the time of my original post on the subject, Sublime was on v2. Version 3 was announced and a beta was made available to folks with a paid license. A tentative release date of November 2013 was given. Not that I really expected that to happen. Things happen. Dates get pushed. It's all good. However, the last update to the beta was in Decemeber 2013 and then nothing. Six months later and not so much as a peep from the developer. I understand that stuff happens. Maybe he just needed a holiday. Who wouldn't? Sublime is nagware. I happen to know more than one developer who is fine dismissing the nag and sticking with the free plan. It's quite likely the developer isn't getting the income necessary to support development, which is sad.

The thing is if you're asking people to pay for you product, and some of us have, you need to keep in touch. Even if all you do is make a blog post that says, "So long and thanks for all the fish," people will know you've stopped development and can move on. If you're not getting enough support, say so. If you decided to take a year sabatical, say so. All the forum chatter I've seen is just asking for an update. No one is criticizing the developer for not being done yet. They just want to know if Sublime is dead or not.

Myself, I've taken another look at PHP Storm. I looked at it a while back, but just couldn't get excited about it. I love multiple line editing in Sublime. I use it all. the. time. It wasn't something I was willing to do without. However, PHP Storm's v8 is available through their early access program. It has multi-line edits. So I've been using it for a few months now. I've even been submitting bugs. As IDE's go it's pretty quick. Takes forever to start up, but I can live with that. It's not like I'm shutting it down and starting it up over and over throughout my day. The main plus for me is better syntax checking and code smell that isn't obnoxious. I don't work in a shop that is PSR compliant or even interested in being so. Code smell plugins for Sublime try and enforce PSR standards which just gets in the way. PHPStorm takes a more laid back approach which is nice. I just figured out today that I can have PHPStorm push files I just committed in Git up to a server via SFTP. Super nice for the side project I have where I can't get Git running on the server.

Will I pony up when v8 is released? Most likely.