What CSS developers do and why you need one

CSS developers are web professionals whose primary responsibility is to deliver a polished and styled product to the visitor’s browser. Practically every website uses CSS, but CSS is often not considered an “equal” in the modern web development stack. Unfortunately, this misperception can lead to CSS being taken for granted, or even overlooked to some extent.

Allowing non-CSS developers to deal with CSS often results in the introduction of CSS hacks and bugs in your code, and can cause unnecessary frustration for developers. In this article, I would like to familiarize everyone with what the job encompasses so you can get a better understanding of why every site needs a reliable, professional CSS developer.

What do CSS developers do?

Let’s start with the basics. Why is CSS so important, and what exactly are CSS developers supposed to do?

CSS is a specific language, and as such, it cannot exist on its own. It requires HTML to make sense. So, the first thing CSS developers do is write HTML code.

Writing tidy HTML always matters

Writing straightforward, clean, and adequately organized HTML is a great responsibility because the humble HTML document is the first thing you deliver to your end-users.

[Read: This CSS library makes it easy to design Windows XP-inspired UIs

]If you are writing a production-ready HTML document, you should try to make sure to include all required and optional tags in the head of the document to make the most of your website. I am talking about setting the correct doctype, language, meta tags, favicons, loading techniques, and SEO.

Everything that could help make your website more performant, more accessible, and provide more exposure to your audience and search engines, as well as other services and tools. The body of the HTML document shouldn’t be bloated, either. Knowing when to use semantic HTML tags, how to add required HTML attributes, and how to avoid deep nesting or divitis, should not be ignored, but rather implemented from the very start of the project. No professional developer starts following best practices halfway through the project, yet even seemingly basic things such as HTML are often done wrong.

The overall design often determines how we organize various HTML components. CSS developers work closely with designers, and not every designer uses the same tool to provide the design. Being familiar with Sketch, Photoshop, InVision, or Figma, and being able to “slice” the design, are must-have skills for CSS developers. One should always keep in mind how to structure a component to make it possible to apply the design at the same time. Using a good naming convention, like BEM or OOCSS, should prevent writing bloated HTML or unmaintainable CSS code.

JavaScript is everywhere

Some components should be interactive, like modals or tooltips. That often requires a good grasp of JavaScript, not “deep” JavaScript, but JavaScript events and DOM handling. DOM handling could be challenging because you don’t want to drain your user’s resources and make your website sluggish or, even worse, crash it and make it completely unresponsive.

The JavaScript world is evolving fast, and sometimes it seems new frameworks and tools appear on a daily basis. Due to JavaScript’s immense popularity, staying in the loop is critical if you want to use the latest best practices and deliver the most enjoyable experience to end-users.

CSS

That is also true of CSS, although many would argue it doesn’t evolve at nearly the same pace as JavaScript. However, new features such as CSS variables, CSS grid, or even Flexbox require some time to master.

Then, there’s browser support, which can still pose a problem even today. Your site might look like a million dollars in a modern browser, but not so much in legacy browsers. Flexbox might be supported in IE11, but then again, it might not work as expected. Knowing how to avoid these problems is part of a CSS developer’s job.

Thankfully, the community is very helpful, and sites like Flexbugs or Gridbugs can save a lot of time.

CSS tools, techniques, and principles

Sometimes we could rely on tools like task runners or bundlers like Grunt, Gulp, and webpack to help us deliver reliable code. You could supercharge your code with linters, minifiers, babel, or PostCSS to transpile the code.

Then we need to take into account various fonts, typography, images, icons, icon fonts, animations, transitions, and other abstract aspects that are part of everyday tasks for CSS developers. Every single feature has its specificity, limitations, problems, and solutions. The more features and techniques you master, the easier it is to style and implement components in your project.

There’s a significant number of CSS properties and values, and one cannot know everything. Fortunately, our tools help us there, especially code editors and dev tools. However, even tools cannot help solve headaches when you need to solve a z-index problem. Failing is the best way to learn.

I would say this is especially true when working with CSS, and this is why:

If you have never tried to solve the z-index problem, then you would never learn about stacking context. If you have never tried to override the Bootstrap class, then you would never learn about specificity. If you have never tried to fix the float problem, you would never learn about the box model.

Sometimes, the solution is simple, but just asking a question is hard. When compared to other languages, you cannot ask why my loop is not working. You need the full context to solve the problem in CSS, and this is often something many don’t understand: the cascade.

Cascade is the best feature in CSS, and it should work for you, not against you. Some developers get around it by inventing custom approaches like CSS-in-JS. If you pack your CSS in the encapsulated environment like React, you cannot use it elsewhere. I doubt this is the approach you want in your scalable platform. If you have problems with the cascade, learn to embrace it, and then learn how to tame it.

While I was preparing this article, Max Böck wrote about the CSS mindset, and this is precisely what CSS developers need to do. CSS developers think inside the box, predict content modifications, and avoid fixed numbers whenever possible while trying to write as less code as possible without overriding default values and context.

Why do you need a CSS developer?

Most frontend or even full-stack developers could write the CSS code. But not every one of them could fix every CSS bug or implement the design without convoluting HTML code or relying on JavaScript where it is not necessary.

A professional CSS developer cares about the code to the final details, enjoys creating layouts and components, even the most complicated ones, and knows how to solve every problem or a bug.

CSS coding standards

Before writing any code, it is generally a good idea to have some ground rules about writing code. CSS developers should respect coding standard—it is essential for maintainability and scalability of the project.

Choose which naming convention to use throughout the project. Establishing a naming convention early on can help developers produce better and more organized code. It can also help everyone involved in the project understand the component structure and relationship between components and elements by reading the HTML code alone.

Decide how to handle indentation, selector types, shorthand properties, units in CSS. For example, avoid using pixel units if the coding standard proposes the usage of rem units. Everyone has a distinct writing/coding style, but as a professional, you have to be able to adopt, and more importantly, understand every concept.

CSS design implementation

Before converting the design to code, you should take the time to understand every page, layout, and component. If possible, dissect every page, create a list of pages and components, and try to find a pattern.

If you notice a component that is present on more pages, you should recognize the environment around it and try to think of it as a standalone component. If there are similar components, like cards or lists, you could have a variation of the same component. This way you could reuse the HTML code and write only a bit of CSS code to make it appear modified.

It is also a good idea to try to find patterns in other areas, like typography and spacing. Sometimes this leads to having helper classes that could be used across the whole project rather than individual pages.

Organize your CSS code

CSS developers should organize their code and create a meaningful structure for everyone. When using tools like CSS processors, CSS developers should document the process of generating the compiled code.

If required, CSS developers can create style guides. Style guides can be a reference when creating new pages or deciding how to approach existing ones. My advice is to make the style guide globally available for the whole team because it is often much easier to have a decision made when having a visual context. Style guides can contain color palettes, typography rules, coding standards, and even static pages. There are no limits, except the budget and your imagination.

CSS code in production

Writing CSS code implies handling cross-browser issues, bugs, animations, transitions, responsivity, and print styles. Many of these features are not easily manageable by all-around developers. I would go that far and say these are the least favorite CSS tasks overall, and not every developer knows how to handle them. On the other hand, specialized CSS developers know (or at least should know) how to produce code with every bug, browser, and environment in mind.

Using modern approaches is one way to go, but supporting older browsers and respecting user’s settings like reduced motions shouldn’t be ignored, either.

CSS developers write HTML and JavaScript code, too. That means asset delivery is the responsibility of the CSS developer. CSS developers should be responsible for loading fonts, extracting Critical CSS, using deferred and async JavaScript loading, and providing responsive images.

None of these techniques are easy to implement, and there is no silver bullet.

What CSS developers can do for you

All of the above explains why you need a dedicated CSS developer. Here are just some of the crucial things they handle:

• Ensure every project member sticks to the coding standard
• Implement design
• Organize the code
• Write the code
• Fix bugs
• Learn about new techniques
• Improve the code

For far too long, the question of the existence and importance of the role of CSS developers encouraged not particularly constructive and well-meaning discussions. Let’s try to agree and acknowledge the CSS developer as a proper role once and for all.

In his article, The Great Divide, Chris Coyier quotes some of the tech leaders, and most of them agree there should be a divide, there should be a CSS-based role that doesn’t require the knowledge of modern JavaScript frameworks. It could help if you know more than “just CSS,” but the role should exist, and it should be accepted as equal to JavaScript-based roles.

After all, do you want to leave your product in the hands of a specialized professional that could polish it to perfection, or would you settle for good enough?

The Toptal Engineering Blog is a hub for in-depth development tutorials and new technology announcements created by professional software engineers in the Toptal network. You can read the original piece written by Silvestar Bistrović here. Follow the Toptal Engineering Blog on Twitter and LinkedIn.