There is no shortage of web technology options today. It’s easy to find resources on how to implement modern solutions. It’s not hard to look up a CSS property or pseudo selector, but it can be difficult to know when to use new technologies on existing or older sites. This is especially the case when a ground-up solution isn't a viable option.
Being an in-house designer, I work with others to design new features and cultivate global design patterns. These patterns flow into an existing, growing, iterative design environment. Since our product is a web application, we have to carefully consider when it’s appropriate to use new technologies. We also need to know when and why it's best to stick with a current approach. Below, I will outline some considerations to make that can guide those decisions. From a perspective of a new team member, these may be helpful as we often only focus on syntax or code.
Consider the existing doctype.
If it's not the latest version of HTML, should it be updated? If so, what implications may that have? If not, what may that affect in functionality, accessibility, or performance? What is the alternative markup?
Reuse structural markup
Don't create classes for objects you don't need. Many HTML tags may already have default styles applied.
It's important to understand CSS selectors and page layout methods. Learn the difference between CSS2 and CSS3 and understand the theory of how to apply cascading styles. You should look closely at the order of specificity in the global styles. Be consistent with the layout technique. Know if a site is using floats or flexbox model, and when to update it system-wide.
In theory, a team will have a pattern library to "grab and build". But in reality, these are tough to nail down and maintain, so it's important to know when to add to the library or know how to navigate without one. Maybe you'll be the first to build one for this system!
Best practices for defining layouts and content has evolved from the over use of tables to optimized layout markup such as flexboxes. Yet, it’s not difficult to find sites that include tables with new CSS properties. The web is now much more forgiving than it used to be both cross-browser and cross practice. Just like any project, the goals and context should impact the ultimate decisions and timelines. It can be frustrating to push for system wide updates, but planned phasing can keep the pieces moving and modern. Learn, iterate, set guides and prove benefits for timelines.