I spent an hour choosing a class name

There, I said it. It’s not procrastination, it’s planning and there is a big difference!

Modal, flag, media block, popup, drawer, overlay, suggestive search, breadcrumb, follow us icons, pagination, sort by, list item, facets, filters, widgets, newsletter, title, heading, social share, nav, nav dropdown, buttons, forms, inline forms, banners, carousels, tabs, accordions, tabs to accordions, toggles. I could go on…

What’s in a name?

Well actually a lot!

The beauty of CSS is it’s simplicity but it’s also open to interpretation. This is great for creativity, terrible for large projects.

Planning the structure and naming conventions of your CSS is critical for a successful project. Remembering to document everything as you go along. The goal is for anyone to be able to jump onto a project and understand what’s happening.

How to name classes

Here are a few pointers I use when naming my CSS classes.

1. A class should have one function.

Don’t over complicate things. Classes should only perform one task. As well as simplifying the naming process it creates a reusable style that can be applied anywhere. It’s okay to use multiple classes on a single HTML element. The goal is to create flexible, lean and usable code; not attractive code.

2. Name what it’s doing, not what it contains.

The same layouts or styles could be applied to lots of different content. Name your classes after what they do and not what they contain. We don’t want to be duplicating CSS down the road or even worse, giving things the wrong classes.

3. Use BEM – Block Element Modifier.

BEM is a naming convention that uses double underscores and dashes. BEM allows you to see the relationship between styles without delving into the CSS. Double underscore represents a reliance on part of the name that prepends it. A double dash distinguishes it as a modifier of the default functionality.

A good example is an article that contains a title and content with some being sticky. Here is an example of BEM in use:

Last November I presented a talk about BEM at Staffs Web Meetup. Harry Roberts also wrote an introduction to BEM on his blog.

4. Use namespaces

CSS doesn’t only apply aesthetic styles but also JavaScript or temporary states. Prepending your classes with js-, is-, has- or u- makes the function of that selector much more transparent. Again Harry Roberts wrote a great article on using namespaces.

5. A partner in crime.

There is nothing better than talking things over with a colleague. This will help focus your ideas while getting the perspective from someone who may eventually work on the code you’re writing.

 

I spent an hour deciding a class name and I’ll do it again.

The real CSS has landed

It’s took a while, but it finally feels like CSS has matured to what it originally promised.

Gone are the days of clearfixes and floats, let alone transparent PNG fixes and weird browser specific selectors! Remember having to use a * at the beginning of selectors to target IE6 and below? If you’re in a reminiscent mood, here are some more.

We often hear the phrase ‘good old days’. I am glad the good old days are behind us! Good riddance! I’m not a religious person, so to reference something from the Bible it has to be good! Ecclesiastes 7:10:

Do not say, “Why were the old days better than these?” For it is not wise to ask such questions.

Hello to a new era of CSS. It finally feels like it caters for our needs. The introduction of CSS calc, flexbox, nth child, just to name a few, are revealing the power of CSS and flexible layouts.

Responsive web design is what the web should have always been. Instead of mimicking other industries such as print, we’re now able to stand proud on our own two feet and innovate for a better web.

Internet Explorer is no longer a special case where we have to support several versions. Thanks to the introduction of other options, Internet Explorer’s majority has diluted down to a mediocre 12%, and that’s only if you include IE7 and IE8.

We often moan about the number of browsers on the market but it’s created a level playing field. For the most part they all behave the same. It’s forced browsers to keep up-to-date and include the new CSS features we’ve all been craving for. We can now focus on creating a better browsing experience instead of supporting quirky browsers.

The real web’s pretty awesome. I love real CSS.

CSS calc is more supported than media queries

Calc is awesome.

If you’ve not come across it in CSS, it allows you to do calculations. The big benefit is you can calculate across different units. It’s handy when building responsive websites. There are often times you need to calculate things like 20% – 1rem, well now you can! Here is an example:

The best bit is the support. Calc has better support than media queries, yes you read that right. Every browser including back to IE9 support it apart from Opera Mini.

Using SASS variables in Calc

You might try to include SASS variables inside calc and find they don’t work. The output in the CSS file with print exactly what was inside the calc function. If you include one it will print the variable name, not the value. After some digging I found you can wrap your variables so they work like anywhere else. It feels a little hacky but hey, it works!

Just one word of caution

When using it with pre-processors such as SASS or LESS you may start getting calc happy. Keep in mind if you’re calculating two values with the same units you can us your pre-processor. This will create cleaner and faster CSS. Just use calc when calculating two values with different units.


UPDATED 03/07/2015: Added using SASS variables inside calc

Sometimes you just need to write

To procrastinate as much as I have is a skill. It has to be, else I have a big personality deficiency. Starting a blog is hard, especially when you work in the industry and you’re a designer. My fixation on look causes me to down tools and run for the nearest dark closet.

Recently Phil Wylie said to me:

Sometimes you just need to write.

I’ve always had a fear of not knowing what to write about. I have lots of experience in the web industry but there is always a niggle that someone else has covered that topic better than I could.

I recently listened to Unfinished Business, a podcast hosted by Andy Clarke. On this particular episode Jeremy Keith spoke about writing a blog for your future self and not worrying about what others think.

The web industry is a fast paced place (say that after a few drinks). We’re continuously learning new things, writing them down serves three purposes:

  1. It helps us focus our thoughts.
  2. To help remember how to do things.
  3. It acts as a reference for our future selves.

I think setting goals are important. They give focus and targets to strive for. So here are my goals for this website:

  1. To express my personal opinions on topics.
  2. To experiment, learn and develop my skills.
  3. A reference for myself.
  4. A place to focus my thoughts, allowing me to think more rationally.
  5. To enable me to write more.

Sometimes you just need to write, so hello! I’m Dave and this is me writing.