My Go-To Web Development Best Practices after 10 Projects

Original author: Elsie Rainee

Commentator: Vanza Setia,

I was just searching on the internet with Brave Search about web development best practices. Then, I found Elsie's article, published on Medium: My Go-To Web Development Best Practices After 10 Projects.

Overall, I think Elsie Rainee has written a great article, although none of it comes out as something new to me.

But I want to refute about her statements:

Global CSS is a time bomb. I learned this the hard way on project three, when changing a .button class broke styling in four places I didn’t know existed.

—Elsie Rainee

We all need to know that many web developers believe that CSS is broken because of global styling.

They are surprised that when they use the button element selector, it styles all the button elements on all HTML pages. What do you think? That is surprising to me because they are so stupid that such a selector creates a strong emotional reaction. How do they not know that every HTML element with class="button" is affected by all CSS declarations within the .button selector? Ridiculous!

They also love styled-components. This means every component has its own styling, and each component does not share the same styling as the other, which is impossible anyway. It denies CSS inheritance, one of the most important features of CSS.

In Elsie's case, she uses the .button class selector. I do not understand how you can be surprised by something that you add to yourself. A class selector means that, by default, all HTML elements will not get the styling until you manually write the class attribute on the desired HTML elements. Do you think someone else wrote that for Elsie? I do not think so.

If she works in a team and she thinks that when she makes changes to the .button styling, that is a communication problem. It is not a CSS problem.

Additionally, she claims that she did not know that there are four HTML elements that have the button class. I do not know what to say. No comment.

Nonetheless, global CSS is a solution that was invented to solve a very serious problem in the past. Before CSS, web developers needed to use special HTML elements to change how other HTML elements look, such as <font>. Now the problem is solved elegantly by simply writing the typography styling with the body CSS selector. We write it once, and it gets applied everywhere.

We can also contextualize our styling. For example, header a means the browser will only apply the styling to all links if they live inside the header element. This means we can

  • use the a CSS selector to provide general styling for all links; and
  • use the header a selector to make the links inside the header element look different.

Global CSS defuses any time bomb and reduces technical debt because it works well without us writing anything to the HTML.

I believe that Elsie sets up another time bomb because she needs to work hard if all buttons require new styling.