Three Fundamentals Of Writing Good HTML and CSS

Understanding the fundamentals of writing good code, whether it be HTML, CSS, Javascript or C# is essential in order to write well-crafted code.   As a software professional, if you don't care about writing good code then you might be in the wrong profession.  In this tutorial, you will learn the 3 main principles you should consider when learning and writing CSS.  Simply knowing these three main pillars will provide you with a way to rate your expertise in each area which will allow you to figure out where you should be investing your learning time.  Interested to know more, then read on.

The Three Main Pillars Of Good CSS

Responsive design

Responsive design is now a standard of any modern website.  I personally haven't worked on a non-responsive site for over 5 years and I can't think of a single reason why anyone wouldn't think about mobile.  As of October 2016 according to StatCounter, mobile accounts for 51% of all traffic.  

If you are working as a front-end developer then you should be familiar and confident with topics such as 
media queries, fluid design, responsive images, using correct units (em, px, pt, cm) in the right circumstances and desktop-first Vs mobile-first strategies.

Writing scalable and maintainable code

Writing good CSS is more important for you as a developer and for the company paying you than the end website visitor.  If you are following bad practices, like writing monolithic CSS within a single file, then you are not only making your life harder, you're also costing the company that's paying for your services, more.

There's a huge difference between hacking out any code and writing well-crafted code.  To write good CSS you need to be familiar with topics such as clean code, reusable, easy to update, DRY (avoid duplicate code), naming conventions, file organization, structuring your CSS and spitting elements into components, variables.

Performance

The last part of writing good CSS is writing performant code.  New research by Google has found that 53% of mobile website visitors will leave if a webpage doesn’t load within three seconds.  This means there are countless front-end and backend reasons why a page can take ages to load and can include caching, overloaded servers, poor database connections, 

To write performant CSS  and HTML you need to be familiar with topics such as compression, how to minimize HTTP requests, using fewer images in a design and using CSS pre-processors like SASS.

Conclusion

These three architectural considerations are the factors that you should always keep in mind when you write CSS.  If you write your CSS and HTML and only cover one aspect, then you'll be setting yourself up for failure down the road.  

The benefit of understanding these differences is that you should be able to sit down, write each category and topic down and then rate yourself out of 10.  The area where you score the lowest is the area you should concentrate your learnings.   

submit to reddit

Jon D Jones

Software Architect, Programmer and Technologist Jon Jones is founder and CEO of London-based tech firm Digital Prompt. He has been working in the field for nearly a decade, specializing in new technologies and technical solution research in the web business. A passionate blogger by heart , speaker & consultant from England.. always on the hunt for the next challenge

Back to top