Modular CSS: Best practices to improve your coding workflow

If you have been coding the web for a while (like myself) you’ve probably come across the “lovely task” of how to maintain CSS without losing your sanity. Let’s be honest, even with the release of CSS3, the language evolved a lot and now we are capable of doing things that were only possible with javascript. CSS, at its core, still is a cascade stylesheet and this makes things a bit complicated when your project scales up and is maintained by a team of developers.

Animated meme gif of Family Guy. Comparing the complexity of CSS with closing a cheap blind
A meme is worth a thousand words

I am all about performance. If I can make something work faster, lighter, with fewer requests, I will. When it comes to CSS, I try to keep it tidy, organized and as small as possible. In this article, I will share my approach to achieving this task.


First thing before you start writing any line of code. Pick a methodology. There are already a couple of approaches out there, all of them developed by very smart folks that faced this problem before us. If you don’t know what a methodology is about: they define a set of rules that give purpose to your CSS classes. In this way, you can categorize and divide (modules) code and reuse it as much as possible.

I will explain a bit one of the different approaches you can take. In this case, it will be SMACCS because it’s the one I use. However, you can also see BEM, Atomic, OOCSS. All of them are good.


Stands for scalable and modular architecture for CSS. In a nutshell, SMACSS defines 5 rules:


This you can think of a CSS reset. All rules necessary to standardize your CSS project. No classes or IDs in this section.

body, form {
  margin: 0;
  padding: 0;
a {
  color: #039;


Set of rules to define your structure. These elements are meant to contain modules inside of it. They set boundaries to produce the layout. E.g: a page with a 2 column layout. Main content / sidebar

.container {
    width: 960px;
    margin: auto;
.article {
    width: 80%;
    float: left;
.sidebar {
  width: 20%;
  float: right;


Elements that build your pages. Things, like carousels, hero images, buttons, etc. They sit inside layout and should be designed to be a standalone component.

.btn {
  background-color: purple;
  color: white;
  padding: 10px;


Pretty self-explicatory. This is rules that overwrite the default CSS applied to an element to apply a different state. This could be a navigation that is collapsed, a button that was clicked, a field with incorrect information, etc.

/* Following previous button example */
.is-active {
  background-color: gray;

The last rule would be Theme. However, this is something not too many projects share. I will recommend you to check SMACCS documentation (or book) if you are interested to know more the methodology.

I hope you can see the value of having a foundation and why is so important to start with it. Your project will get a structure that everyone in your team knows and can follow. This approach gives you scalability and organization.

Naming convention

After looking at something like SMACSS you are probably thinking: “well if I and my team are going to stick with a methodology we should probably call things the same way”. YES, you are absolutely correct. Naming conventions have been around since the beginning of computing science, they help teams to align things and reduces time on simple tasks like finding a class or file.

CSS is not the exception. You should be able to read anyone’s code and understand if it is a module or a layout (if you are using SMACSS) as well as if you need to create a new class, there are rules to make sure you follow the style guide. This is all really attached to code standards (that’s a topic of its own). But you get the idea… and please, let’s not fight about tabs vs spaces (I am a tabs guys … ? don’t tell anyone).

The previously mentioned methodologies define naming conventions as well and you can use them if you want. I will give you an example of what I normally do.


// Module
.nav { // Modules are always on word no hyphens 
  // ... code
.nav--large { // Submodules are at the same label. always use --
  // ... code
.nav__item { // Subcomponents of a module are always follow by __
  // ... code
.nav-is-fixed { // State indicates something that's toggled
  // ... code


<ul class="nav nav--large">
  <li class="nav__item"></li>
  <li class="nav__item"></li>
  <li class="nav__item"></li>
<!-- then javascript kicks in and modifies nav -->
<ul class="nav nav--large nav-is-fixed">
<!-- ... code -->

When a project gets setup using this kind of approach. The time invested in debugging is reduced considerably because you know where to find the code you are looking for, what does it do and how it’s called. This is a MUST for any mid-large scale project.


I am sure you are familiar with these ones. However, it’s necessary to mention them. I don’t really know who writes “CSS” anymore. We all are lazy, let’s be honest. No one wants to write more lines of code… well, that’s exactly what our friends the preprocessors are here for.

They will help you to write less code, format it in a different way, implement some basic programming logic and then finally dump a CSS file that can be used by the browser. The most popular preprocessors are SASS, LESS, and Stylus. However, lately, SASS has taken most the market. So if you are not already using one and you are planing to do so… I would say, go for SASS.

I won’t explain how to use pre-processors because there’s ton of information about it. A good start point is the _documentation_ section for each one of them (good and straightforward) or you can read “An Introduction to CSS Pre-Processors: SASS, LESS and Stylus”. However, I will explain the parts I consider important for mid-large projects.


Being able to define variables in your CSS is the key. Large projects are probably going to have a design style guide defining primary colours, secondary colours, fonts, breakpoints, etc. This is the kind of things you want to store in variables and reuse it across your codebase.

//If we rebrand the project and in 2 years the primary color is red. We only need to change it in one place.
$color-primary = blue;


CSS codebase can get big. Break it down into different files that can be imported into a master file. That’s the one who will get compiled and dump the CSS for us. Base your files in your methodology. E.g: if you are using SMACSS, a file for base, layout, one per module, etc.

// Breakdown your codes into smaller files
@import "base";
@import "layout";
@import "module-01";
@import "module-02";

Functions (mixins)

the same way we use functions in any programming language to make units of code that can be reuse. Mixins provide a similar approach for CSS. You can do things like rounded borders, breakpoints, circular images, etc. There are tools with pre-defined commonly used mixins:

// Don't ever write media queries anymore. They are long an annoying.
@include breakpoint( $screen-mid ) { 
  // ... code

Preprocessors are wonderful and definitely make our life easier. However, they can be our worse enemy as well. While things might look really neat and simple in your .scss file. The final .css file might be a complete mess.

This tends to happen when we use nesting more than what we should. The code gets compressed and compiled and ends up being a massive line of repeated CSS selectors for only one rule.

Screenshot of developers tools showing excessive number of CSS selectors applying the same style. Consequence of using preprocessors in a bad way
To avoid deep nesting. Use a rule of thumb: no more than 3 levels deep.

In the second part of this series we will be discovering the other key elements for managing CSS in mid-large scale projects:

  • Javascript Task Managers
  • PostCSS
  • Testing
  • Libraries

Thanks for reading and happy coding.

Google Analytics Checklist For website launch.

Google Analytics has a special place in my heart because it has helped me recognize and fix my mistakes for many years. That’s why I make sure every website we launch is fully ready to collect data.

Unfortunately, not that many developers, web agencies, or website owners place Analytics set-up as their priority when launching a website. And it’s completely fair, after all, they have so many things to worry about. The only problem is, after a few months when someone on their team (SEO, CRO, Marketing, dev, business, and so on) want to check the data, they realize that all that time the website didn’t track goals, events, search… sometimes they don’t even have any Google Analytics at all.

Months of data lost.

So I thought that if we could make a simple step-by-step checklist detailed enough we could help web workers make sure that each and every website collects the data they need.

The Timeless Google Analytics Checklist

  1. First of all, make sure the tracking code is set properly.
    If you want, you can simply set up a new Google Analytics account, and paste the tracking code in your header or footer. The script looks like this:Google Analytics tracking code

    If you need more information on setting up the tracking code click here.

  2. Include the tracking code in every page: stand-alone pages, different templates, forms, anything that doesn’t use the header or footer where the main tracking code is.
  3. Subdomain and cross-domain. If you use sub-domains or multiple domains you can easily track them with Google Analytics in the same property. Find out how to configure Google Analytics for subdomains and cross-domains.
  4. Create a second view or profile. Google Analytics collects data for each profile/view differently. So if you make a mistake in your settings, you might lose data. Always keep a default view with everything, just in case. It’s like working in a lab and keeping a control sample. To create a new view simply go to Admin > View > Add new view. We will assume from here that all the changes you’re making are in the newly created view.add a view in google Analytics
  5. Exclude your IP from the tracking. You don’t want your data to interfere with the real visitors’ data. Here is how to do it.
  6. Sync Google Seach Console with Google Analytics. Somewhat easy. The idea is to make sure that you can get all the data from Google Search Console transferred to your Analytics account. You will then get access to some very useful features:google analytics search console
  7. Link Adwords and Analytics if you have an Adwords campaign running or plan to run any. Here is how to do it.
  8. Enable Demographics if you’re interested in Audience data. If your website has enough traffic, it could be quite useful. Just remember that the data is not very accurate since it’s based on the user’s browser history and social media profiles (like Google Plus). Also, visitors under 18 are not represented, they are mixed with the rest. But it can still be a great way to A/B test, segmentation, and remarketing.
  9. Enable Site Search. If you have a Search field anywhere on your website, enable site search. Go to Admin > View Settings > Enable Site Search and specify what are the parameters.Google Analytics enable search settingsThe parameter, or query, depends completely on your search system. If you pass the query in the URL like this “” then you can simply specify the q as the parameter. If you use a plugin, for example, you can use a custom javascript code to make sure the parameter is passed to Google like this:Custom javascript code for site parameter Google Analytics
  10. Enable Benchmark. This is another underestimated feature in Google Analytics. Basically, you agree to anonymously share your data with your Industry, and in return, you can compare your results with them. Pretty cool eh? here is how to do it.
  11. Speed sample. If you don’t change that value, GA will test the speed of your site once every blue moon. If your traffic is high it’s OK, but if your traffic is under 100 visits/day, you might want to collect more samples. For this you must change your tracking code to this:site sample rate Google Analytics
  12. E-Commerce Tracking (if relevant). There is so much to say about tracking E-com with Analytics that I recommend you read this great article by SEMRush about it.
  13. If you’re like me, you’ll want to set up Goals to try and put a number on your actual goals. It could be every time a visitor subscribes to your service, clicks on your phone number, or buy a product. Goals are powerful and are based on two different tracking systems.
    • Destination page: Ideal with conversion funnels for E-commerce (e.g. cart > checkout > thank you).
    • Event-based: A user clicked on the Call Us Button. More common but requires setting up Events.
  14. Event Tracking. Time-consuming and sometimes tedious but oh! so powerful. You can track any interaction a user has with your website. Probably requires some javascript knowledge. here is a complete guide to Event tracking in GA.
  15. Marketing Campaigns. Even if your campaign provider tracks data, you want to make sure you have your own website tracking system. Basically, you create a link that contains data for a specific campaign, and every time users use that link to go to your website they will fall under the campaign name in Google Analytics. You will need Google URL Builder to build your campaign’s URL.
  16. Filter Spammers to keep your data as clean as possible (hint: it will never be 100% accurate). We follow this very useful article to filter spam.
  17. Weather Conditions. What? Well, this one is for fun. But it could actually be helpful. With GA you can tell what’s your website’s conversion rate based on day and time, source, and location. That’s great, but maybe you should add the weather to it. What if a rainy day happens to have twice as many conversions? Here is how to do it.
  18. Update your Privacy Policy depending on your country’s regulations to make sure your users know how much data you’re collecting and for what purposes.

I hope you enjoyed that Google Analytics Checklist and that it will help you collect useful data to make your website even better!

If I missed anything don’t hesitate to contact me at Anthony(at) to let me know.

The top 10 SEO mistakes web developers make

As a web developer and an SEO specialist at the same time I find myself conflicted many times between both hats. As a web developer I care about clean code and easy ways to create new content, and as an SEO guy, I’m obsessed with the way Google indexes my website, internal linking, breadcrumbs and alt texts.

When I’m wearing the SEO hat, I’m the annoying guy asking my fellow developers if they followed all the SEO rules I gave them.

And since I too am a developer, I know they’re going to lie when they answer “yes of course”.


The 10 SEO mistakes web devs make

10. Alt tags and Titles

When one codes, it’s very easy to not fill in Alt texts for images and Title texts for links. Because sometimes we simply don’t know what they are. Ideally, they should be filled by an SEO specialist or a Digital Marketing guru. But they don’t have access to the code, or limited access to these fields in a CMS. That’s why web devs should always spend a second to wonder what the image or the link is about and write it in the appropriate location.

9. Rich Snippets and Structured Data

Rich snippets and structured data, AKA and microdata were launched in 2009 by Google and then 2011 by most Search Engines to improve the quality of the web. The idea is to tell Search Engines what’s in the content. For example, if we’re talking about a blog post, we should add a bunch of blog related microdata tags to our code. Here is a pretty good introduction to snippets and structured data and here is a review microdata generator .

8. Link Anchors

Click here and read more are not the best in terms or User Experience, and they’re definitely not the best for SEO! The anchor text of links tells Google (and your visitors) what the destination page is about. So when your anchor says “click here” no one really knows what’s going to happen. Link Anchors have a real importance in SEO and you should fill them with what the page is about (like I did in the present article).

7. Missing Meta (social media, languages,etc..)

Metas are not just for jquery and CSS. they contain a lot of information for bots to understand the website. Yes, the site works without them, but it’s also true that not optimizing them is a good way to miss opportunities in terms of Social Media and Search Engine presence. What you can do if you don’t know where is to start is wonder about what bots you care about, and what do they need. Facebook? Google? they all have different recommendations.

In any case, make sure your description is focused on your keyword AND the content of the page. You might also need robots and canonical to avoid duplicate content, title for SEO, language for SEO and accessibility, etc…

6. Pagination and Pages Variations

Pagination and Variation pages are bad for SEO since they basically have the same URL and the same meta for different content. They all cannibalize the same keyword. There are mainly two ways of dealing with this problem.

First Option: Embrace the difference. Make sure every page has different names and meta, basically, make them unique.

Option Two: Tell Google it’s page two or variation three or whatever the difference is. Use <canonical> to indicate what’s the main page (the first one) and pagination markup like <rel=”prev”> and <rel=”next”>. You can also add a “nofollow” to the link pointing to the next page and a “noindex” to the actual page.

Here is a great article about Pagination and SEO.

5. Duplicate Content

It’s not always on purpose but sometimes we just copy past content from a page to another, or we create a PHP script that generates a bunch of pages using the sane variable. Well, that’s duplicate content, and it is to be avoided at all cost.

You can read our article about how to fix keyword cannibalism to help you fix all these common content issues.

4. Don’t care about URLs

There are many articles about how to construct URLs for SEO. Basically, they should be as simple as possible, and contain only words and dashes that tell users and bots what the page is about. I know URLs are convenient for passing an incredibly long list of variables and characters but if you can, please avoid it.

3. Use the wrong HTML tag

If you want something bold for design purposes, use a class, not the <strong>. Strong means it’s important. Sometimes we use HTML tags instead of classes because it’s faster. But bots and search engines use these tags to understand what matters and what doesn’t. <Strong> and <em> are actually important for SEO, the same way paragraph, section, aside, and other tags are important. Try to make sense, it will pay off.

2. Use Headings for style

Have you ever done that? Use H1 for every sub-title on a page? After all, they are titles and they have the same CSS style.

Bad idea.

Search Engines and bots use headings to understand the hierarchy of your content. If everything that you want big is a H1, then what do you have for h2 or h3? Even rankings don’t really use these anymore, it makes a lot of sense.

1. Robots and Sitemaps

Sometimes we forget. And Google indexes everything. And then when your SEO guy comes in and does “” in Google they find out that your development folder at the root of your website is nicely indexed with all of its content. Don’t laugh, it happens. And the problem is that it will take weeks, or months to fix it.

First, make sure you have a robots.txt file that excludes everything not public. Dev folders, sources, anything not public.

Then create a sitemap (if you’re on WordPress you can install Yoast SEO and it will do it for you). Once the sitemap is created, look at it! Make sure every page in there is useful and relevant.

Hint: the “hello world” post is not.

When you’re done, send it to Google and pray.

What does it mean to be the best Web Development Company?

If you ask most of the web development companies out there if they are the best in what they do, they will probably say yes. After all, how could you trust a company that doesn’t believe they are the best?

What does it mean to us to be the best web development company?

We try our best every day to deliver the best website or web service possible.

Here at Noble Pixels, the developers have seen hundreds of projects over the years. With time it is easy to see which project succeeded and which one didn’t. That doesn’t mean that what worked in the past will work in the future, but it helps us advise our clients choosing the best solution.

The Best Web Design Companies

the best web design

Often when you Google Web Development Company you’ll find agencies that pretend they offer great Web Design and Web Development. Often it’s true. But if you also need the best SEO, the best Social Media Strategy, the best IA, the best Copy, the best pictures, then it gets really hard to find one company capable of delivering all this.

The reason? Because it’s incredibly difficult to concentrate such skilled talent in one place. It costs money and it’s not always the best solution. Here at Noble Pixels we don’t pretend we’re the best at everything, we are web developers. We’ve picked awesome talents, freelancers and companies to do what they’re good at. That’s our way to offer the best in everything.

For all of our big Design Projects, we trust our partner LOOP. We believe they are some of the finest web designers in Toronto and perhaps in North America.

The best Web Development Frameworks and Practices

To make a good dish you need good ingredients. We try to work with the best web development frameworks, tools, and practices, always. Not only it helps us being more productive, but it guarantees your product longevity.

First of all, because a lot of developers will be comfortable with it.

Then because you won’t need to revamp your system next time you want to make a big change. You’ll just customize your existing system.

The best Website Developers?

At the end, that’s our goal: keep delivering the best product for your budget and your time. Adding all the elements you need to make it a success, working with your team, your partners and your rules. Never over promising, always keep the conversion open, and most importantly believe in your project as if it were our own.

That’s what we mean by “best“.