Get best of the week

CSS developers - why do the world need them?

The audio version in Russian (Yandex.Music) / iTunes

Over the past ten years, CSS has grown exponentially by adding more and more features, thus gradually becoming quite complicated and confusing. The CSS of our day is very different from the CSS of the decade 2001-2010.

Before I begin to explain why the world needs CSS developers, we need to go back and look at the CSS history.

Yellow duck post cover

Disclaimer:
.
 .
 , , .


CSS


In the decade 2001-2010, when the Internet was conquering the world, CSS stood still. Internet Explorer 6-7-8 was the leading browser. Microsoft at that time did not pay much attention to CSS specifications, did not show any interest in adding new features to it. CSS has remained at version 2.1 for all these years.

Since 2007, modern browsers Firefox and Chrome began to appear. Even at this time, we still had to support Internet Explorer. This held back our development. As the main governing browser at the time, IE installed a nearly nonexistent, near-zero CSS development speed. It was the "dark age" of the Internet.

Dark Times CSS illustration

Fundamental Events of the New Era of CSS


I was a developer at the time, and therefore saw two important events that changed the world of CSS and the web as a whole:

  1. The beginning of the era of smartphones (June 29, 2007) - it all started with the release of the first iPhone. This release necessitated the support of new CSS features that would fit the new category of web devices.
  2. Chrome Browser Release (September 2, 2008) - Chrome was a new browser that started as a desktop application. Until then, Internet Explorer was the main ruler of the Internet and dictated its development.

Chrome browser and Steve Jobs with iPhone at the 2007 conference, collage

Why Frontend developers deal with both CSS and JavaScript


At that time, the idea that Frontend developers should manage all the capabilities of the client was quite common. Then there were only a few CSS rules. CSS has now expanded, and such a vision is no longer relevant.

CSS 3, HTML 5, and JavaScript: A New Era


It's hard to say exactly when CSS 3 came about, since it has been developed since 1999. Real support on the Internet began in 2011. Chrome & Firefox were increasing their market share at the time. Smartphones have become very popular. With their own browsers, they all began to support the first new CSS 3 features.

These changes reduced the popularity of Internet Explorer. At that time, it was still a significant browser, however, Microsoft realized that it should begin to pay attention to specifications and CSS development. They released Internet Explorer 9.

New CSS


CSS 3 is now 10 years old, why not CSS 4? CSS 3, unlike CSS 2.1, is an open standard. Thanks to this, it is constantly updated. There is no need to name the new version “CSS 4”, as CSS 3 is a continuous development, a version for all time.
image

Since 2011, every browser update includes new CSS features. In the past few years, most browsers - Chrome, Firefox, Opera, Edge - are updated almost every month (Safari is updated mainly once a year). This frequency means that we get new CSS features almost as soon as they appear.

What's new in CSS over the last 10 years


Over the past ten years, many new specifications have appeared for different types
of CSS modules, for example:

  1. Layout — , Flexbox, CSS-, , writing mode ;
  2. Typography — , font-variant, line-breaking;
  3. Shapes & Graphics — , , blend-mode, clip-path, shapes ..
  4. Animations & Transforms — CSS/SVG , transitions, transforms, will-change.
  5. Units — viewport vw/vh/vmin/vmax, rem, calc(), contain, fit-content, min-content, max-content;
  6. CSS preprocessor — sass, less, stylus, postCSS
  7. — SVG, @support, CSS .

You may notice that many new features fall under the responsibility of the frontend developer. This means that he must gain experience in all of them. But this is not even a complete list.

In real life, a web developer is almost impossible to have even a basic level of understanding of all these new features. In addition, JavaScript developed in parallel. And he developed, perhaps even more than CSS. This makes it even more difficult for one person to keep up with all developments.

Big mistake web industry


This situation, in which frontend developers could not cope with the new complexity in CSS, created a new movement called "How not to learn CSS."
A new movement called “Don't Learn CSS”

The first CSS frameworks


This error began with frameworks such as Bootstrap and Foundation. The first release of each of them took place in 2011. This particular date is not accidental - these were the first years of CSS3, responsive design, mobile websites and cross-browser typesetting.

I never tried to dive deep into Bootstrap, since I never liked its non-semantic CSS naming convention. Helping other web developers in the community , I quickly realized that Bootstrap is only suitable for those cases when you use it as is, without trying to customize it for yourself.

Bootstrap markup screenshot
Bootstrap HTML - most classes are non-semantic.

Angular 2: the first JavaScript-compliant framework


The new Angular was the first to introduce encapsulated styles. It was a way to rid the inexperienced web developer of the need to understand CSS cascading. Using this method, you can create global styles and still have local styles for each component.

Of all the various development ideas, the idea of ​​encapsulated styles is, in my opinion, good, because you can still create global styles as well as encapsulated styles for components. In addition, we still have a separation of concerns for CSS / SASS, for HTML, and for JavaScript. We can enjoy a simple way to download only the necessary styles.

Screenshot of the file structure in a project with Angular

React - the death of semantics!


React takes this idea further and writes all the HTML and CSS inside JavaSscript. The goal of creating reusable styles died with React. It automatically generates CSS class names; thus, the code becomes unreadable and impossible to understand, both because of CSS class names and because of non-semantic HTML. From my point of view, this is similar to how CSS and HTML were written at the beginning of the Internet when it did not matter how CSS or HTML looked while they were working.

React code markup screenshot
React - unreadable css class names

Why is it so bad? When you have a real CSS problem and a regular frontend developer cannot solve it and needs an experienced CSS developer, the confusing React code gets in the way. Yes, both web developers can solve it together, but it takes time from two experienced web developers.

Wake up!


Frontend developers do not drag in CSS! Someone has to say it out loud! Yes, I know that this is a crude generalization and therefore not 100% correct, but I am not trying to be 100% correct.
Before I continue, you should know a little more about me.

Rooster on the background of the rising sun, photograph
Wake up - frontend developers don't drag in CSS!

Who am I


I started as a frontend developer in early 2007.
At the beginning of 2012, I almost completely stopped writing JavaScript, the main reason was that I loved CSS very much, and JavaScript was much less.

From 2012 to the present, since I focused only on CSS, I have developed an advantage in this area. Over the years, I wrote many articles about CSS , founded the local CSS community with 5,000 members, and had countless conversations at meetings, seminars, and conferences.

I'm with a microphone at a conference, photograph
I speak at ConFrontJS 2019 in Warsaw, Poland.

Why am I telling you all this?Because I'm still a kind of unicorn in my country and in the web industry. Yes, I get a lot of thanks, but there is a big one but! Although this works for me because I am well-known in my country's web industry, it’s hard for others to become the same because the web industry is still trying to maintain the “old name of the Frontend developer” (which means try writing first-class JavaScript and CSS) .

In my country, I know the very best Frontend developers. Since I'm interested in understanding the web industry, I always ask these top Frontend talents if they think they are good at CSS. Their answer continues to amaze me - most of them feel insecure about CSS, and they are always surprised at developers like me who love CSS.

Web industry needs to change


Despite the fact that this worked until 2010, it cannot continue in 2020. The web industry has changed, and it's time to mature and abandon the early job titles in the web industry and move on to a new positioning.
Positioning that will meet the needs of our time. At first, large companies. Then to everyone else.

Figures 2020 beautiful font, illustration

What is the interest of companies?


In 2020, CSS is an important skill. While companies are trying to save money, they may end up spending more money. Over the years of working as a web developer, I saw how developers spent too much time on what a specialized CSS developer could solve in 10 minutes and with more productive code.
In 2020, CSS is an important skill.

What can be new job titles?


Over the past eight years, I have changed positions several times. I did this to explain my abilities to people who see my LinkedIn profile .

At first I called myself CSS Master (by the name of the community that I founded - CSS Masters Israel ). It was fun to see shortly after this announcement of work with such a headline. I realized that there are companies that need a CSS developer, but do not know how to adequately name it.

A photograph of a piece of a job application form, a meaningless picture

Later, I changed the name of my post several times (UI / CSS - Developer / Interface Developer / Engineer / Architect / Expert), trying to fit my abilities into the name of the work.

Don't Be Just a CSS Developer


These days we have several types of developers who specialize in the visual part, such as CSS and, for example, SVG. I will try to define these types here :

CSS Developer - This name is for CSS middle-level professionals. These are developers who can take the design and easily convert it to CSS.

CSS Architect- This category is intended for developers, such as myself, who, in addition to building CSS efficiently, are experts in planning the separation of CSS and building it into a complex building structure. Unlike CSS developers, CSS architects are more experienced and know how to smartly scale large projects, with additional CSS developers working in their team. In addition, they communicate with other web developers, project managers and web designers.

Many different yellow rubber duck showcasing a variety of professions, illustration
The variety is wonderful!

CSS Animations Developer - Nowadays, we can improve the user experience almost effortlessly using CSS animations or SVG animations, thereby turning a good project into a fantastic one. This work may be suitable for large companies.

These are the most common needs for 2020, but there are other types of specialized developers, such as:


There may be more - the possibilities are endless!

Finally


In this article, I sought to raise awareness about a subject that, it seems to me, has not yet been covered. My goal is to get the web industry on track.

In addition to my article, there are also articles on this topic from other points of view:


In the end


If you liked this article, I would be grateful if you shared it with others so that this idea could raise new awareness in the web industry.

Who am I?


My name is Elad Shechter, I am a Web developer specializing in CSS and HTML architecture. I work for investing.com .

My twitter and website .

I'm on the background of the projector, talking about the project, photography

More articles:


All Articles