Disclaimer! Before getting into it, firstly I apologize for my potato English.
Background:
I have a software engineering background, with 1+ years of experience in Frontend development, I learn a little through my mistakes so do not take my advice as literal, do your own research as well.
So we’re going to see some best practices and guidelines to make frontend a little less painful.
Layout:
Layout or structure your code before getting started. Yes, don't directly open your vs code or whatever editor and start creating the boilerplate, first divide your screen into possible sections, with responsiveness in mind.
Yes! Sometimes you need to draw on paper as well, how the layout should look. Always see your design or screen like this! and try to divide your screen with the layout.
But first, you need to understand the CSS layout systems, you need to look into the articles to see a deep explanation of Flex, Grid, or Bootstrap Grid system, but understand CSS and Grid first as a beginner you shouldn't rely on some library or framework as a beginner.
Trust me the main two CSS layout system really help you to create responsive layouts; even most of the time you can make it work with CSS flex only. I myself use Flexbox most of the time.
The point is how we know this layout is good and how to master it. The simple answer is a lot of practice.
Here’s how I learned; so go to any website with some complex layout (start with simple) and try to just create its layout by using CSS Grid or Flex. e.g: Unsplash.com.
Enough motivation I guess; let's divert our minds to HTML.
Semantics:
So what is a semantic element? Elements with a meaning. It is a part of w3c guidelines.
Semantic elements are for us, yes it is used to clearly represent your document. For instance, If you use div for every container or section then how do you know this is a section, nav, or header? (Yes you can write a lot of comments above each element), but I suggest you always use semantic elements because,
Code is Readable:
The code is more readable, you don't need to write tonnes of comment on top of each element what this element or section does.
Clean Code.
You don’t need to give each element a class or id you simply use the element selector directly in the CSS.
<body>
/* Without semantic elements */ <div className="list-container">
<div className="list">
<div className="list-item">1</div>
</div>
</div>
/* With semantic elements */
<div className="list-container">
<ul>
<li>1</li>
</ul>
</div>
</body>// CSS/* Without semantic elements */
.list-container .list {
padding: 0;
}
.list-container .list .list-item {
border: 1px solid #000;
}
/* With semantic elements */
.list-container ul {
padding: 0
}
.list-container ul li {
border: 1px solid #000;
}
Accessibility.
Yes for accessibility, if you properly use semantic elements it will help screen readers or assistive tools to properly understand the flow of the website. Allow browser and search engines to better interpret the website.
Also, it will help Crawler to better navigate/index your site. So eventually your website has better SEO. Go through these articles to learn more about semantic elements & accessibility:
HTML5 semantic elements and Webflow: the essential guide Semantic HTML
Semantic HTML 5 elements Best practices for better SEO
Commenting:
Don’t write comments on top of each HTML element and CSS selector.
Just write what is going on and why. Just keep in mind the comments are for developers. So it should explain what is happening, and its purpose, if needed.
You don’t need to write this is navbar and this is an image.
/**
* Card Primary
* Defines the appearance and behavior of the default card.
*/
.card {
@media (max-width: {{ screen-xs }} ) {
border: none; /* because the card takes 100% of the screen on mobile */
}
}Styling and Conventions
Naming:
Do not use random class names for elements, there should be consistency in the naming. e.g:
<body>
<ul class="nav-list">
<li class="nav-list__item"> </li>
<li class="nav-list__item--active"> </li> </ul>
</body>
In the above example, I used the BEM methodology. BEM is a naming convention for HTML and CSS classes. The methodology was developed by Yandex.
So B is for block, className that represents the block or container.
E defines an element, or you can say children of that block element.
M is a modifier, that defines behavior or you can say the state of that element.
Learn more about the methodology in detail.
Use preprocessor:
Use preprocessor for CSS, the question is why? Nowadays there are many preprocessors available the most popular one is SASS. It gives you superpowers, like nesting, mixins, and functions. The most beneficial thing about SASS is it generates browser-compatible CSS code. Which include vendor prefixes (use for unstable/experimental properties).
.nav-list {
&__item {
&--active {
}
}
}Use CSS variables:
It is a really powerful feature, you don't need to write a property that is repeated, just create a variable and use it, it is also used for theme switching.
For containers, if the width is in percent or you use min-height, it will adjust itself according to the viewport. Rem is for fonts, if you change your root font all fonts that use rem are changed automatically because rem size is relative to root size.
Final thoughts
Try to read different docs and articles regarding best practices and make notes out of them.
Also, read and go through different style guides to create your own version.
Google HTML CSS style gudie https://cssguidelin.es/ https://codeguide.co/
Idiomatic CSS Airbnb CSS / SASS Style Guide frontend guideline by bendc,
Google it, and you’ll find a ton of style guides regarding HTML and CSS, but keep one thing in mind go through different style guides, but use only those that solve your problem.
