Tag: CSS

What Are Source Maps (And Are They Needed)?

January 22, 2019 / Tom

If you work on the front-end of a site in any capacity – be it for a plugin, a theme, or even something outside of WordPress – you’re likely working with minification tools.

The benefits are obvious, right?

it lessens the payload,
it allows us to focus on development on our local environments

But one of the features that come with working with these technologies and that’s the ability to generate source maps.

And this raises a question (or maybe two): What are source maps? And are they even needed?

You can claim it’s late to the game to talk about this, but there are always people entering the industry that may not know this material.

So why not cover it?

Dynamically Centering an Element in a Container Using CSS

January 24, 2018 / Tom

When it comes to writing about development, I don’t often talk about things beyond PHP and JavaScript mainly because I work with those languages more than others.

I mean, yeah, CSS is part of the deal as is HTML, but it’s expected these days, right?

So if there was ever a quick tip for me to offer regarding CSS, this is it (though maybe I should write more?). It’s hard when Chris does such an awesome job running CSS Tricks, but I digress.

Anyway, here’s the problem and the solution.

Using Mixins in CSS: Developer Abuse and Misuse

December 23, 2013 / Tom / 0 Comments

When it comes to the various CSS preprocessors that are available today, I think one of the dangers that we – as developers – face is using certain features that were not previously possible in vanilla CSS as a sort of crutch.

By that, I mean that I think that we have a tendency to fall back on things that we’re used to in our server-side environments as opposed to practices that are more preferential on the client side.

For example, I there are things that we used to do – or should be doing – with class names as opposed to mixins, but may not end up falling back to using mixins as opposed to more general classnames.

Confused?

The CSS Single Responsibility Principle

December 5, 2013 / Tom / 0 Comments

In software development, there’s this set of principles called the SOLID principles. As with most things in computer science, it’s yet another acronym in which each letter stands for the following:

Single-Responsibility
Open/Closed
Liskov Substitution
Interface Segregation
Dependency Inversion

Though these ideas are geared towards software engineering and object-oriented design, there’s one principle that I think is relevant to front-end web development (well, actually a few but I digress for now).

Specifically, I think the idea of the single-responsibility principle is applicable to CSS – namely, within the popular LESS and Sass preprocessors.