If you want to become a programmer and create websites, it is definitely worth sticking to all the best practices. This will make your code readable and, above all, easily extensible, and therefore it will make it easier for you and other programmers who will also develop your code. In this article, I will present you with 13 best practices for creating websites in HTML and CSS, thanks to which your pages will be fast, optimal, and their code clean and extensible.
1. Do not use the notation: !important.
Do not use the notation !important to override styles. This is a very bad practice that makes project development very difficult and above all destroys cascading in CSS. Use this notation only as a last resort. Definitely do not overuse it.
2. Optimize images.
You can improve the loading speed of the page in various ways, but it seems to me that it is worth optimizing the images on the page first and foremost. Especially if you have a lot of these images, if they are not properly adjusted and optimized, this will significantly increase the loading speed of the page. Remember about the appropriate image format, size, weight, compression, displaying different images on different devices and all good techniques for placing images on your website. All this will make the page load faster.
3. Remember about HTML semantics.
There is a reason why we have a lot of tags in HTML. Each of them can be appropriate in a different situation and, above all, each of them has its own purpose. Remember to always use tags in accordance with their purpose. If you have a header on your page, use the header tag, if a footer, use the footer tag, if a section, use the section tag, if a navbar, use the nav tag, etc. If you want to write good code that follows the best standards and practices, you need to remember this.
4. Do not refer to elements by id in CSS.
Referring to elements in CSS by their id is a bad practice that later causes a lot of problems. The id greatly increases the specificity of the selector. In addition, the id should always be unique and used only once on a given subpage. It should mainly be used by JavaScript code, and here in CSS we avoid it.
5. Do not use long selectors.
It is a bad practice to use long selectors in CSS. This also increases specificity and our code becomes difficult to maintain. In addition, it reduces the readability of CSS. All you need to do is assign a specific class in HTML and use this class to refer to the element in CSS.
6. Remember the BEM methodology (Block__Element—Modifier).
The BEM methodology makes things easier for us and, above all, helps in the proper naming of our elements. Thanks to BEM, our code will be more readable and easier to extend in the future and it will simply be easier to work with. It is worth learning the Block Element Modifier naming convention.
7. Create modular code.
This is still a reference to BEM, if you create modular code, divided into such modules, it will also be much easier for you to manage it. You have to realize that the projects, websites that you will create can be very extensive and such modularity will help you control all of this.
8. Remember about code reusability.
Another good practice is creating reusable code. I mean reusability within a single website, but there is also nothing stopping you from using some ready-made components on your other websites. If you want to create reusable code, remember not to add any large margins, build a base component, and place any specific colors in the modifier class. Also, remember about naming, which should be consistent with the function and not the appearance. This means that a better name would be, for example, primary than blue, danger than red, and success than green.
9. Set styles for one class/selector in one place.
Also, don't make the mistake of styling a given class in several places in the CSS file. For example, you have some styles at the top of the file, and over time you remembered that you lack property styling and you add styles in a completely different place. This introduces a lot of mess into the entire code. All classes from a given module should be next to each other. Styling the same class is even more so.
10. Don't assume that all users work on the same screen as you.
The key thing is adapting the website to different devices. Remember that each user can connect to your website from different devices, these can be smaller phones, tablets, computers or large TVs. You always have to have a website adapted to all these screens. So you always have to test it and check if everything looks nice on each screen. The implementation itself is not difficult, you just need to adapt the appropriate properties for different devices using media queries. Remember to create responsive websites that will look nice on every screen.
11. Use variables.
Variables make it very easy to manage values set in CSS. They have many advantages. Thanks to them, you can easily set values that describe exactly how the values are stored, you can also give names to different values. If you want to change the value itself, it will also be easier thanks to variables. The change will only be in 1 place, but without using variables such a change would have to be introduced in at least several places, up to several hundred places, depending on the size of the page.
12. Each label should have the "for" attribute filled in.
Be sure to add the for attribute to each label, so that when you click on the label itself, the focus will be set on a specific field.
13. Don't assume that all users have fast internet.
Just because your site works fast on a local computer doesn't mean it works that way everywhere. Remember that users use different devices and have different internet speeds. A user who connects to your site from a phone will probably have slower internet, and it's worth adapting our website to them. Without this, the site owner may lose potential customers and money. Programming tools also help us a lot in this regard. We can verify how our site will load on slower internet. Additionally, we can also detect various possible performance problems here. Also remember that the first connection will always be slower, so it's worth taking this into account and blocking the cache for testing.
HTML CSS School
If you want to learn how to create beautiful websites, consider joining the HTML and CSS School (more info here).
