Working with Cascading Style Sheets (CSS) can be difficult for beginners. CSS allows you to build, update, and maintain the look and feel of your application. However, this language requires skill in manipulating HTML pages to get the desired layout.
Here are some mistakes to avoid when using CSS. Save time and ease the development process.
1. Use px for font size
The “px” unit represents pixels. You can use this to represent different lengths on your web page, from element widths and heights to font sizes.
However, px locks the design to a fixed size on all screens. px images can occupy the full width of one screen, but only a small portion of another screen. If you want more proportional elements, use relative measures such as rem or percentage (%).
The best relative measure to use is rem. This unit refers to the font size of the root element, which you can set in your browser settings. In the following example you can see the effect of px and rem on the element.
<!DOCTYPE html>
<HTML>
<head></head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>
You can style the font size for this document using px units with the following CSS:
h1 {
font-size: 50px;
}h2 {
font-size: 30px;
}
p {
font-size: 15px;
}
The resulting page looks acceptable when viewed on a large screen.
But it doesn’t look great on a small screen like a phone.
Then apply rem to the same content. Specify the base font-size on the html element and use rems to size the other elements as shown below.
html {
font-size: 16px;
}h1 {
font-size: 3rem;
}
h2 {
font-size: 2rem;
}
p {
font-size: 1rem;
}
Notice the difference between the big screen and the small screen. Using rem will give you better content scaling regardless of screen size. The element never exceeds the set screen size. So it’s better to use relative lengths instead of pixels.
On your desktop screen:
On small screens, text in rem units is still readable.
2. Put all styles in one file
Using one CSS file for a large project can be confusing. It will create a file with long lines of code that will confuse you on update. Try using different files for CSS style sheets for different components.
For example, you can have different files for navigation, header and footer. The other is for the body section. Separating CSS files helps structure your app and improves code usability.
3. Improper use of inline CSS
Regular CSS allows you to write styles in your HTML pages just like CSS frameworks like Bootstrap and TailwindCSS. Inline CSS allows you to apply your own styling to HTML elements. Use the style attribute of the HTML element.
The following code is an example of inline CSS.
<h2 style="color:green;">This is a Green Heading</h2><p style="color:red;">This is a red paragraph.</p>
The text looks like this:
However, HTML with only inline CSS is cumbersome. All CSS resides in the same file as the HTML, as there is no other place for CSS. It looks crowded. Editing such files is difficult, especially if it’s not your own code.
Also, inline CSS requires you to write code for each element. This leads to more repetition and less code reuse. Always use a combination of external stylesheets and inline CSS to style your web pages.
4. Overuse of !important
In CSS, !important Rules increase the importance of properties/values. Overrides other style rules for that property on that element.
should have only a few !important Rules in code. Use it only when necessary. It doesn’t make sense to write code to override it. The code looks messy and has problems running on some devices.
<!DOCTYPE html>
<html>
<head></head>
<body>
<p> I am orange </p>
<p class="my-class"> I am green </p>
<p id="my-id"> I am blue. </p>
</body>
</html>
CSS:
#my-id {
background-color: blue;
}.my-class {
background-color: green;
}
p {
background-color: orange !important;
}
The result looks like this:
5. Don’t follow naming conventions
CSS has naming conventions that guide developers on how to write standard code. This is essential if you decide to debug CSS files in the future.
One of these criteria includes using hyphens to separate grouped words. Another is to name selectors according to their function. So people watching it don’t have to guess. It also makes code easier to read, maintain, and share. for example:
instead of this:
.image1 { margin-left: 3%; }
We write:
.boy-image { margin-left: 3%; }
Looking at the stylesheet will tell you exactly which image the code is for. His HTML/CSS style guide on Google lists many conventions that every developer should know.
Writing comments is the most underrated skill in programming. Many people forget to write comments that explain their code. But it saves time. Comments are essential for reading and maintaining code.
Comments are essential because CSS is loosely structured and anyone can create their own conventions. We recommend that you use well-structured comments to describe your style sheet. You can write comments that describe sections of code and their function.
.video {
margin-top: 2em;
}
.salutation {
margin-top: 1em;
}
7. Failing to plan ahead
Many people do, but it’s a big mistake to start coding blindly. CSS determines how the front-end structure looks. Design says a lot about programming skills.
Your site design articulates your vision and the resources you need to get there. Have an image of your project. Then design on paper or use a design toolkit like Canva to visualize what you want.
Once you have an overview of your project, gather all your resources and start coding. Save time and redundancy.
Why You Should Consider These Recommendations
If you are developing your application on the web, use CSS. Working well with CSS requires practice and following standard rules. Conventions not only make code easier to read, they also make it easier to maintain.
Writing standardized code saves time and effort. Time spent on front-end formatting can now be spent on more complex functionality. You can also reuse your code and share it with others. Follow set rules to write better code and become a better developer.
