Why the World Needs CSS Developers
In the last ten years, give or take a few, CSS has grown extensively with the addition of more and more features, thus gradually becoming quite elaborate and complicated. The CSS of our days is very different from the CSS of the 2001–2010 decade.
Before I start explaining why the world needs CSS developers, we must go back and look at the history of CSS.
The History of CSS
In the decade of 2001–2010, while the internet was conquering the world, CSS was stuck. Internet Explorer (versions 6–8) was the leading browser, and since Microsoft, at that time, didn’t pay much attention to CSS specifications and didn’t have any interest in adding new features to it, CSS stayed at version 2.1 for all those years.
Even in the years from 2007 and up, when modern browsers such as Firefox and Chrome started to appear, we still had to support Internet Explorer, and
that held us back. Being the main browser that ruled at that time, IE set the virtually non-existent speed of CSS development. In some ways, this was the ‘dark age’ of the internet.
The Constitutive Events of the New Era of CSS
As someone who was a web developer at that time, I saw two constitutive events which changed the CSS world and the web in general:
- The Start of the Smartphone Era (June 29, 2007) — this new era began with the release of the first iPhone. That release brought the need to support new CSS features which would suit the new category of web devices.
- The Release of the Chrome Browser (September 2, 2008) — Chrome was a new browser, which began as a desktop computer application.
Up until then, Internet Explorer was the primary ruler of the web and dictated its development.
Why Front-End Developers Do Both CSS & JavaScript
The idea that Front-end developers should command all of the front-end capacity was quite wide-spread at that time. That idea might have suited the early times when there were only few CSS rules to follow, but nowadays, when CSS has expanded, it isn’t appropriate anymore.
The New Era of CSS 3, HTML 5 and JavaScript
It’s hard to say precisely when CSS 3 started, as it had been in development since 1999, but the real support on the web began around 2011. At that time, Chrome & Firefox were already increasing their market share; smartphones were becoming very popular, and, having their own browsers, all of them started supporting the first new features of CSS 3. These changes led to a decline in Internet Explorer’s popularity, and while it was still a significant browser at that time, Microsoft realized it must start giving heed to CSS’s specifications and development, thus releasing Internet Explorer 9.
The New CSS
CSS 3 is Now 10 Years Old, why isn’t there CSS 4?
CSS 3, unlike CSS 2.1, is an open standard, which means that it is continuously updated. Therefore, there isn’t any need to name a new feature a “CSS 4” feature, since CSS 3 is an ongoing development.
Since 2011 every browser update includes new CSS features. In the last few years, most browsers — Chrome, Firefox, Opera, the modern Edge — get updated nearly every month (Safari gets updated primarily once a year). This frequency means that we get new CSS features almost as soon as they come out.
What New Things Have Come Into CSS in the Last 10 Years
In the past ten years, many new specifications for different types of
modules were added to CSS, for example:
- Layout — Responsive Design, Flexbox, CSS Grid, Multi-Column Layout, Writing Mode, and Logical Properties.
- Typography — Variables Fonts, font-variant, line-breaking properties.
- Shapes & Graphics — Filters, masking,
blend-mode,clip-path, shapes, and more. - Animations & Transforms — CSS/SVG Animation, transitions, transforms,
will-change. - Units — View-port Units (
vw/vh/vmin/vmax),rem,calc(), Size Keywords (contain,fit-content,min-content,max-content). - CSS preprocessor — Sass, Less, Stylus, PostCSS.
- SVG — Vector graphics elements.
- More —
@support, CSS native variables, and more...
As you can see, many new features fall under the responsibility of a front-end developer, which means that he must gain experience in all of them, and this isn’t even a full list.
In the real-life of a web developer, it is virtually impossible to have even a basic level of understanding of all these new features. Besides that, and I’m not going to go into it here, JavaScript has developed in parallel, maybe even more than CSS, which makes it even more difficult for one person to keep abreast of all of the front-end development.
The Web Industry’s Big Mistake
This situation, in which front-end developers haven’t succeeded in managing the new complexity in CSS, has created a new field called “How Not to Learn CSS”.
A new field of “How Not to Learn CSS”
The First CSS Frameworks
It started with frameworks such as Bootstrap & Foundation, with the first release of both of them in 2011. Those specific dates aren’t accidental — these were the early years of CSS3, Responsive Design, Mobile Websites and Cross Browser support.
I’ve never tried to deep dive into Bootstrap since I never liked its un-semantic CSS naming convention. But from helping other web developers in the community that I manage, I quickly understood that CSS Bootstrap is suitable only for cases where you use it as-is, without trying to customize it.
Angular 2 — the First Agreed Upon JavaScript Framework
The new Angular was the first to introduce encapsulated styles. It was a way to spare the inexperienced web developer the need to understand the cascading of CSS. Using this method, you can create global styles and still have local styles per component.
Out of all of the various development ideas, this idea of encapsulated styles, from my perspective, is a good one because you can still create both global styles and encapsulated styles for components. Besides which, we still have the Separation of Concerns, for CSS/SASS, HTML and JavaScript, and can enjoy an easy way of loading only required styles.
React — the Executing of Semantics!
React takes that idea further — writing all of the HTML and CSS inside the JS. The purpose of creating reusable styles is dead with React. React generates the CSS class names automatically; thus the code becomes unreadable and impossible to understand, both because of the CSS class names and because of the un-semantic HTML. From my perspective, it looks like the way CSS and HTML used to be written at the beginning of the web, when it didn’t matter what the CSS or HTML looked like, as long as they worked.
And why is it so bad? Because then, when you have a real problem in CSS, and a regular front-end developer can’t solve it and needs an experienced CSS Developer, React’s tangled code stands in the way. Yes, both web developers can solve it together, but it wastes two experienced web developers’ time.
Wake Up Call!
Front-End-Developers Are Bad at CSS! Someone has to say this out loud! Yes, I know that it’s a gross generalization and thus isn’t 100% right, but I’m not trying to be 100% correct.
Before I continue, you need to know a little more about me.
Who Am I
I started out as a full Front-end developer at the beginning of 2007.
At the beginning of 2012, I stopped writing JavaScript almost entirely, the main reason being that I loved CSS very much, while JavaScript — much less.
From 2012 until now, because I’ve been focused only on CSS, I’ve developed an advantage in this area. During these years I’ve written many articles on CSS, founded a local CSS community (5000 members), and given countless talks (at meetups, workshops, and conferences).
Why am I telling you all this? Because I am still kind of a unicorn in my country and in the web industry. Yes, I do get a lot of appreciation, but there is a big But! While it works for me because I’m well known in my country’s web industry, it’s tough for others to become the same, because the web industry is still trying to preserve the “old Front-end developer title” (which means, try to write first-rate JavaScript and CSS).
In my country, I know the very top Front-end developers, and since I’m very interested in understanding the web industry, I always ask these top Front-end talents if they think they are good at CSS. Their answer keeps on astonishing me — most of them define themselves as bad at CSS, and they are always surprised by developers like me who love CSS.
The Web Industry Has to Change!
Even though this has worked until 2010, it can’t continue in 2020. The web industry has changed, and it’s time, at first for the big companies, to mature and abandon the early web industry’s job titles, and progress to a new positioning that will fit the needs of our time.
What Is the Companies’ Interest ?
In 2020, CSS is an important skill. And while the companies are trying to save money, they might end up spending more money. During my years as a web developer, I’ve seen developers waste too much time on something that a dedicated CSS developer could have solved in 10 minutes, and with better performing code.
In 2020, CSS is an important skill.
What Can the New Job Titles Be ?
In the last eight years, I’ve changed my on-job title several times. I did it to explain my abilities to people who see my LinkedIn profile.
At first, I called myself a CSS Master (following the name of the community I founded — CSS Masters Israel). It was funny to see shortly after, ads popping up with this job title. That made me realize that there were companies who needed a CSS Developer but didn’t know how to describe it adequately.
Later on, I changed my job title several times (UI / CSS — Developer / Interface Developer/ Engineer / Architect/ Expert), trying to fit my abilities into the job title.
Don’t Stick With Only a CSS Developer Title!
These days we have a few types of developers who specialize in the visual part, like CSS and other features such as SVG. I will try to define these types of CSS developers:
CSS Developer — this title is for mid-range experts in CSS. These are Developers who can take a design and easily convert it to CSS.
CSS Architect — this category is for developers, like me, who, besides efficiently constructing the CSS, are experts in planning the dividsion of CSS and its construction into an intricate building structure. Unlike CSS Developers, CSS Architects are more experienced and know how to cleverly scale big projects, with optional CSS Developers working on their team. Besides that, they communicate with other web developers, project managers, and web designers.
CSS Animations Developer — these days, we can improve user experience almost effortlessly by using CSS Animations or SVG Animations, thus turning a good project into fantastic one. This job that can suit big scale companies.
These are the most common needs for 2020, but there are more types of specialized developers such as:
- Sara Soueidan who is an SVG Expert.
- Diana Smith whom I consider a CSS Artist.
And maybe there are more — the possibilities are endless!
To Summarize
In this article I aimed to raise awareness of a subject that I don’t feel has been raised yet. My goal is to drive the web industry in the right direction.
Besides my article, there are more articles on this subject, from other perspectives:
Final Words
If you liked this article, I would appreciate you sharing it with others, so that this idea can raise a new awareness in the web industry.
Who Am I?
I am Elad Shechter, a Web Developer specializing in CSS & HTML design and architecture. I work at Investing.com.
You can follow me via Twitter and find more of my stuff on my website.
