Simple CSS Tips for New Hires

Know the basics of CSS with these CSS tips.Spoiler alert: This is not cutting edge CSS syntax information. It’s known stuff.

Well, it’s supposed to be known stuff. Unfortunately, there are many occasions where what I’m about to tell you doesn’t make it into what I consider to be good CSS.

Tips for New Hires: Be Prepared for Continuous Evolution

First, let’s all agree that CSS is always a work in progress. As websites change, especially sites with long life cycles, your CSS will need updates and tweaks. If you update one part of the site, you’ll have to update others. If not for functionality then at least to make sure your CSS has uniformity across the site. Our Patriot Software Engineering team works on multiple platforms that have constantly evolving styles, so I am prepared for a new challenge every day.

CSS Tips

In a sense, you’re the maintenance department, continuously fixing and renovating so that new updates and best practices reflect across your site as a whole.

Practice Good HTML Structure

To make this as easy as possible, you should practice good HTML structure. When other developers head into your code, they should be able to read and easily understand what all your elements are and how they are arranged on the page, which will, in turn, help them understand its relationship with your CSS.

Avoid Creating Bloated CSS

Second, you want to make sure that you’re using as little CSS to control an HTML element as possible. You don’t want to make bloated CSS with multiple references to the same element. One style to rule them all, so to speak.

How are these even considered simple CSS tips? This all sounds simple, right? In a vacuum, it is. However, when you work on a big site and have different business objectives driving the creation of pages and interfaces, sometimes you can’t sit down and analyze how you’re going to lay everything out and code it in a clear, and legible manner. Sometimes you just need to get it done. Rushing to keep up with business velocity means more work on the back end–it’s just one of the hazards of working in software.

Leave Organized Comments

One of the CSS tips I recommend and implement on the front end to ensure that I can keep Patriot’s CSS legible and accessible despite competing business priorities is to record lots of clear and organized comments. In fact, I do a full table of contents in my CSS code so those people who are rushing in to get work done can easily understand how my elements are laid out and located on the sheet.

Organization Relieves the Pain of Different Coding Backgrounds

Depending on how you got started in code can impact how a CSS project gets built out. Most coders I know understand multiple code languages, and sometimes they’ll mix and match best practices in CSS depending on what project they’ve been immersed in recently. One of the downsides of a diverse web or software development team is that multiple authors with multiple experiences add a real-world obstacle to code work. Different best practices will get mixed into a project just like accents or slang get mixed into speech–further stressing the need to make things as clear and accessible as possible up front.

Organization Prevents Doing Double the Work

Finally, you may get pushed into another project that sucks up all your brain power only to, a month or so later, be told to go back to your original CSS and make changes. Sometimes people will think you’ll just remember everything about what you previously designed, but, of course, you can’t just keep it all in your head. That’s why clean code is crucial. It helps you find your bearings so much faster. As I said, CSS is always a work in progress; always updating, always evolving, and you’ll rarely ever get to write it once and just walk away.

Use the Developer Tools Panel

One final thing, and this pertains to onboarding new employees who’ve not worked on your code yet, or maybe little code at all.  Remind them that they can view and edit styles within the developer tools panel. You can go to any web page, right click on an element, select Inspect and all the styles for that element are in the right column. You can immediately start tinkering with the code and style. It’s a great way to learn how something is built, and test your new styles.


, , , , , , ,

Comments are closed.