Structure

"Why make food look good? You're just eating it."

Well-structured code is one of the best things you can do to ensure your software’s longevity and maintainability. Unfortunately, it is something that new developers commonly will disregard. New developers tend to ignore structure in favor of quick fixes and patches, leading to an unreadable and unmaintainable codebase. The spaghetti has turned from the meal into the monster, consuming time, effort, and energy from anyone who needs to work with the code in the future.

Structure is highly dependent. Each language, framework, and toolset will likely have different standards and best practices, and each developer may choose to implement them in different yet valid ways. Despite this variability, structure needs to be consistent within a project. This makes code discoverable and traceable, meaning errors can be fixed swiftly and new code can be written effectively.

A great example of the need for structure is in a simple static HTML, CSS, and JavaScript website. This example deals with three languages which serve three purposes: content, styling, and logic. Sites may be written with inline CSS and JS, or by linking external files through HTML tags. For example, this website is written with the CSS and JS in separate files. Even then, the CSS file is a compiled SCSS file made up of small, readable CSS components. I can go in and change any part of how my site looks or functions by finding the relevant component file and editing only a small segment of code.

Suppose I put half of my CSS styles directly into the HTML, either via an inline style tag or style attributes on elements. The site has lost structure. It might make my site look weird in places – ruining my visitors’ or users’ experiences – because I can no longer be 100% certain if an element is already styled in one place or another when adding changes. To change any element, I now need to look in two or more places: the CSS files, and the HTML files. Inline CSS overrides CSS in files, which means that I am now more prone to redundant and repeated code (worse performance) or spending unnecessary amounts of time maintaining my codebase.

To be clear, inline CSS is not a bad thing. Neither is mixed inline and file CSS. In large sites like YouTube, inline CSS can be used to speed up page loading times by allowing the most important styles to be loaded with the HTML. Small sites or sites served on ultra-low power hardware may also not need a full CSS file and can get away with inline styles. However, styles should be consistently documented, keeping the overall code maintainable and readable. If a certain structure makes sense for your app or improves the app’s code quality, it makes sense to go with that and not some arbitrary structure from any guide online.

Am I telling you how to structure your app? No; Although, you should not confuse app structure with HTML structure in this case. The structure of your HTML is vital for responsive and inclusive design and your overall site performance. How you organize your code is up to you. Just remember that keeping it consistent, clear, and most importantly documented is the best way to healthy and maintainable code.