Cascading Style Sheets (CSS): Avoid Making These CSS Mistakes

Cascading Style Sheets (CSS): Avoid Making These CSS Mistakes

CSS (Cascading Style Sheets) is the language that web designers use to style websites.

Knowing CSS is essential for anyone who wants to work in the field. It is a very powerful language, but as with any other language, it is possible to make mistakes without knowing it.

In this article, we’ll tell you about some of the most common CSS mistakes and how you can avoid them.

Not testing

Many designers start creating websites without first putting them through a proper QA (Quality Assurance) process. This means that they’ll be scrambling to find people with enough experience to test their sites before they go live.

While there are many benefits to putting your site live without having fully tested it, there are also dangers that you need to be aware of.

The main issue with this is that there’s a large chance that your site won’t behave the way you intended it to behave. If you’re using a free WordPress theme, this won’t be an issue as many developers provide free theme fixes, but for those who are trying to create a bespoke design, this can be a major concern.

To avoid this, as a designer, it’s your responsibility to ensure that your work is properly tested before you present it to the client.

There are several different tools available online that can help with this process, such as UserTesting.com and Userlytics.com which can both help you find and fix usability issues before they become major problems.

Using images instead of CSS

A common issue that crops up time and time again is using an image where there is a background colour or a border. The reason for this is that images give the impression that something is more concrete than CSS can, which makes designers trusty friends since anything is technically possible. Using images in this way can also sometimes cause compatibility issues and decrease performance as images are usually larger than necessary.

To avoid this, always use CSS to style your images instead of using the IMG tag. This will ensure that all images are treated equally and will decrease the likelihood of running into any problems due to incompatible browser versions or technology stacks.

Using too many IDs (documents)

Using too many IDs in your CSS is never a good idea and can easily lead to ID conflicts, which in turn can lead to massive headaches and potentially even a complete redesign if the issue isn’t resolved.

Even worse, Google recommends against using multiple IDs as it makes your page less accessible to search engines.

To avoid this, as a CSS beginner, it’s best to start with only one ID for each section of your site as this will make it easier to manage and debug in the future.

If you’re using a free WordPress theme, then using a plugin such as Autopagetteo can help by automatically creating unique IDs for each section of your site, so you don’t have to worry about running into this issue.

Improperly nesting HTML lists

Nesting HTML lists are generally a bad idea, however, there are times when it’s necessary.

get google ranking ad

For example, if you’re displaying a list of products and you want to style them differently based on whether they’re in stock or out of stock, you can use nested lists to accomplish this. The reason for this is that you can target the nested list, making it easier to style specific items inside of it.

To avoid this, as a beginner, it’s best to avoid using nested lists altogether and instead use different class names for products that are in stock and those that are out of stock. This will allow you to easily style each list item differently based on its condition.

Putting all your style sheets in one big file

Putting all your style sheets in one big file will make them more difficult to manage and debug.

Especially since, at some point, you’ll have to update multiple files if you make a minor change to one of them. In addition to this, if you need to make a change to more than one file, you’ll inevitably end up merging them, losing track of what changes were and creating a maintenance nightmare.

To avoid this, as a beginner, it’s best to keep your style sheets separate. Not only will this make it easier to update specific elements on your website when needed, but it’ll also make it easier to find specific files if you need to make changes to them.

Once you get more experienced, you can start moving your style sheets around, as needed, to ensure they’re easier to find and update when needed.

In addition to this, if you’re ever curious about how your site looks on a mobile device, then keeping your files separate is essential. By doing this, you’ll be able to easily view the design files for your site as intended, whether it’s on a smartphone, tablet or laptop computer.

Using Too Many CSS Files

This is probably the most common mistake that newbie web designers make. They feel that all they need is one CSS file to do everything. Naturally, this is far from true and using lots of CSS files is usually the key to creating a complex, yet flexible, design.

If you are using Bootstrap, for example, you would want to style your website using the classes and the CSS files that come with it. This way you can be sure that everything is properly styled and that you are not overriding any Bootstrap classes.

In other words, this is the recommended way to use Bootstrap because it keeps things simple and easy to follow. The same goes for any other framework or toolset that you may use.

Overusing Vendor Prefixes

ALSO READ  Featured Snippet Optimization: Complete Guide In 2022

CSS3 Best Practices for Designers | Webdesigner Depot Webdesigner Depot » Blog Archive

Another common mistake that newbie web designers make is that they use too many vendor prefixes. For those who don’t know, a prefix is a way of adding a little CSS magic to a property so that it works as expected. For example, if you want to make text look yellow, you would use the following code:

p { color: #FFF; }

p::-Moz-selection { color: #FFFF00; }

p::-WebKit-selection { color: #FFF; }

In the above example, we have the vanilla (default) styling for three different ways of making the text yellow.

This is especially useful for older browsers because they do not always handle CSS the same way that newer browsers do. So by adding these prefixes you can assure that your website will look the same (or close to it) in all browsers.

This keeps things simple and clean. You should always strive to use vendor prefixes as little as possible because you never know what browser (or device screen) someone may be using.

Using too many prefixes can even lead to problems where your CSS does not work at all in certain browsers. So always make sure that you are adding those vendor prefixes when necessary and not just for cosmetic purposes.

You should always avoid using it as much as possible because it makes your code much more vulnerable to hacks. Use it when necessary and for properties that you cannot easily achieve with regular CSS.

If you are just adding a rounded corner to a link or replacing text with a different colour, you can usually achieve these tasks with standard CSS. You should always avoid this for everything because it makes your code less maintainable.

Overusing Units Of Measurement

CSS has three units of measurement: pixels, ems, and percentages. Pixels are the basic unit and simply refer to the width and height of an element.

Each pixel represents one dot on a liquid crystal display (LCD) screen which is why you may notice images look a little pixelated on very high-resolution displays.

So if you are using pixels make sure that you are using them correctly and not just because your screen is pixelated. There are three basic rules when using pixels:

  • Do Not Use Percentage-based Values
  • Know When To Use Em Units And When To Use Pixels
  • Use The Same Unit Of Measurement Across The Board

Repeating CSS

CSS has the following keywords that you can use to group sets of rules:

Animation

Animations are a great way to make your website stand out. Even if you aren’t an experienced web developer, you can still give it a shot with a service like Squarespace.

The following are a few neat things you can do with CSS animations:

  • Slide shows
  • Drop down menus
  • Labels
  • Progress bars

The list of things you can do is endless. Just remember: the more animation you have, the longer it will take to load. Be sure to keep that in mind.

Background-Colors

You can use the following CSS property to give your website some background colour:

background-color

This property allows you to make your website’s background a specific colour. You can choose from a variety of colours using this property. The following are the 6 available options:

  • Red
  • Orange
  • Yellow
  • Green
  • Blue
  • Indigo
  • Violet

In addition to colours, you can also choose to make the background pattern or image dynamically. To do this, simply add the following line of CSS code:

background-image

This will inject an image into the background of your website. The image’s position and rotation will be determined by the CSS properties around it.

This can be a great way to make an image fill the entire background of your website. This is also a way to practice making websites without having to worry about the layout as much.

It’s all about the image and positioning in the background, rather than the text or content on your page.

Cross-Browser Compatible

While making the switch to CSS, many developers find themselves in a bit of a pickle. The good news is that much of the CSS they learned was designed with cross-browser compatibility in mind. That is, it was tested to work consistently across all major web browsers. This means you don’t have to worry about any browsers acting differently than others when it comes to your website. Even better, it now works perfectly across all major platforms (desktop, tablet, and mobile). As a web developer, this is the ultimate compliment you can pay to any browser-based technology.

Content

If you run a blog or a website with news articles, you’ve probably noticed that images are worth a thousand words. When an image isn’t available, people simply won’t have the same connection to your content. To encourage people to engage with your content, try including an image that’s relevant to what they’re reading. For example, if you’re writing about JavaScript, maybe include a picture of a dog dressed in Javascript attire! The more you can do to make the reading experience relevant to what they’re interested in, the more they’ll appreciate your content.

Cursor

A cursor is a small pointer or symbol that appears in the middle of a piece of text to indicate that an element or option is selected. For instance, in a piece of software, if you highlight the word “Account” in the password section, a small symbol of a computer mouse will appear in the middle of the word. Designers use cursors to indicate what should happen when an option is selected. The following are the available options for cursors:

  • None
  • Arrow
  • I-bar
  • Hand
  • Wait
  • Tick
  • Cross
  • Wait (with text)
  • Pulse (with text)

You can choose from a variety of cursors depending on the type of software or website you’re building. Just make sure when selecting a cursor, you keep it simple and make it easy for people to recognize and associate it with your content.

ALSO READ  CSS Visibility: Everything You Need to Know

Dimension

The dimensions of an element or media can be described as the length and width of that element. For example, a photo taken with a square format has the same dimensions as the original. You can use the CSS property height and width to control the size of an image:

This will create an image that’s exactly 260 pixels wide and 350 pixels high.

Flexibility

Flexibility is very important in design, as it makes it easier to create layouts that look good on every screen size and device. You can use the media CSS property to make a single element or area of your website design more flexible. For instance, say you have a small image that you want to use as a background on a mobile device. To do this, use the following code:

background-image:

URL (link to the image)

width (the width of the image)

height (the height of the image)

flex-shrink: 0 (prevents the image from getting smaller when viewed on a smaller screen)

This code will create a small image that is 100% of the width of the screen on which it’s displayed and fit perfectly on any screen-sized device.

Graphic Style

If you’re using an image as a background, you need to decide what style you want it to have. Do you want a pattern or background colour?

How about rounded corners or a smooth fade? You can control the look of an image using the background image and border-radius properties along with the box-shadow property.

If you’re not sure what graphic style you want, try playing around with the different options available in Photoshop or a similar tool. You can also consult a designer or developer for help creating an image style that suits your needs.

Inline Style

Did you know that you can set the CSS property display to inline on an image or text element to make it behave like a normal piece of text would?

This can be a great option for people who are having issues with margins or are just looking to increase the overall aesthetic beauty of their website.

Having an image or text behave like a normal piece of content is a great way to accomplish that. To do this, simply add the following CSS code to your page:

display: inline;

The following code will display a profile image with a text overlay.

display: inline; width: 50px (sets the width of the image) (text) margin-top: 20px (sets the top margin) (top and bottom)

Sometimes it is unavoidable to have duplicated CSS, but this should be a rare occurrence. You can use these keywords to avoid having duplicate CSS by creating a general set of rules that can be applied to all the items you need styled and then naming specific sets of rules that can be applied to individual items.

For example, let’s say you have a navigation menu that you need to style in a certain way.

You can create a general set of rules that applies to all items in the navigation menu (e.g., apply a rounded corner to every element) and then create another set of rules for the particular items within the menu that need more specific styles (e.g., make the text bold). This way you are sure to have the correct styles applied without having duplicate CSS.

Incorrect Typography

Proper typing is very important when working with websites. You would not download a document that is all caps or all lowercase, and expecting the text to be formatted in the same way is a sure way to confuse your readers. Using incorrect spelling and capitalization will also make your text seem less professional.

Sometimes you may need to get slightly creative and use HTML entities to create text that looks the same as the real thing but with all the spelling errors and incorrect capitalization removed.

This is just one of many ways that you can have words appear in a way that makes sense but is not actually how they are spelt. Knowing how to do this properly will make your documents easier to read and more professional-looking.

Overusing Floats

Floats are an essential part of modern web design because they allow you to design your page with all the elements on one line regardless of how much space they take up on your screen.

They are also necessary when designing multiple columns because when a row does not fit entirely in a single column it will overflow into the next column.

Knowing how to use floats properly is very important because they can be a great help in designing a website but if used incorrectly or excessively they can turn a good design into something messy and hard to maintain.

Some designers can get carried away with the use of floats and make them a part of the design itself. While this may look professional at first glance, it can mask major layout problems that might arise from overusing or abusing floats. When designing with floats in mind, it is important to keep the following in mind:

How To Avoid Overusing Or Abusing Floats In CSS

A quick Google search on ‘CSS float abuse’ yields hundreds of articles, tutorials, and blog posts on the subject. Most of the content revolves around one basic question: when should you use the float property in CSS and when should you avoid it?

The short answer is: never use floats for layout purposes. Or, at least, very rarely. The long answer is a bit more complicated.

What Are Floats?

All About Floats | CSS-Tricks - CSS-Tricks

Floats are properties in CSS that set the ‘physical’ dimensions of a design.

For example, if you have a banner across the top of your site’s homepage, you might want to set the height and width of that banner to ‘float: left;’, which would make it behave like a left-aligned picture frame. (See example)

ALSO READ  How to Prepare an SEO Audit Report for Your Clients (Just Like an Agency)

The main use for floats is to create a centred, or ‘blocky’ look for a design. You can think of it as a shorthand for ‘margin: 0 auto;’. You use it when you want a container to appear as a seamless picture frame around the content that you’re trying to centre.

In the context of a grid-based layout, you might use floats to create the illusion of three columns when there are only two. (See example)

Why Should You Never Use Floats For Layout?

There are three big reasons why you should never use floats for layout purposes:

  • It’s difficult to control the appearance of a float.
  • It’s difficult to centre afloat.
  • It’s difficult to ‘scale’ afloat.

Each of these points will be covered in more detail below.

1. It’s Difficult to Control The Appearance Of A Float

The main problem with floats is that you can’t control how the browser will display them. If you want to change the appearance of a floating element in a CSS design, you have to edit the CSS directly—which, as we’ve established, is a terrible idea.

While it’s true that you can specify the width and height of a float with CSS (in fact, this is how you usually do it), you cannot change the alignment, padding, or border of a float with CSS. So if you want to change the appearance of a float in a design, you’re basically out of luck.

2. It’s Difficult To Center A Float

A CSS grid can be both horizontal and vertical, which means that you can apply it to any shape or size of the content.

If you want to centre an element in a design, you have to apply text-align: centre; to the parent element of the element, you want to centre. This is usually a good idea, but it has its catches.

If you have an image in a design and you want the text next to it to be centred, you have to centre the whole design.

3. It’s Difficult To ‘Scale’ Floats

If you have a design with three columns, with the first column taking up a third of the design and the other two columns sharing the other third, you can create the illusion of three columns with two columns by ‘scaling’ them.

This is done by reducing the width of the second and third columns while maintaining the same height.

In most cases, this is not what you want. When you scale a float, you change the proportions of the design, which can affect the design as a whole. To use an analogy, say you have a flowerpot with a saucer in it.

If you scale the flowerpot, the ratio of the height to the width changes, so the pot doesn’t look the same as it did before. You don’t want to scale your flowers.

4. Floating Elements Are Bad For User Experience

It’s difficult to put into words the harm that floating elements do to the UX of a design. While we’re on the subject, let’s explore some of the other problems that arise from using floats for layout.

Slow Rendering

First, and most obviously, floating elements are bad for the user experience because they don’t render immediately when the page loads. This is especially noticeable in the case of images that are floated.

When a web browser encounters a page with a lot of images, it has to go through a process of ‘pre-rendering’ all of the images on the page before it can display any of them.

Typically, this is a fast process, but if you have several large images on a page, pre-rendering them all can take a while. During this time, the user experience is adversely affected because the pages take longer to load.

Poor Clickability

Long-Term Exposure to Flat Design: How the Trend Slowly Makes Users Less Efficient

When an image is floated, it prevents the text next to it from being vertically aligned with the image. This makes it difficult for users to accurately click on items next to floating images. Not only that, but if the image is a link, the user experience of clicking on it is poor because there’s nothing to suggest that it is a link until they’ve already clicked on it. (See example)

Unclear Relationship Between Navigation And Content

When an image is floated, there’s nothing to suggest it is part of the navigation.

For example, if you start reading an article and you see a horizontal navigation bar at the top of the page, you won’t know if the bar is meant to be there or if it’s just an artefact left from the previous design of the page.

In addition to being a source of UX misery, using floats for layout purposes makes it more difficult to tell what’s important and what’s just decoration.

For example, did you create a graphically-intensive design and then just threw in a bunch of useless floats to make it seem like it has more depth than it does?

The short answer: is yes.

If you’re looking for quick, easy-to-achieve-on-steroid results without too much thought, then using floats might be the way to go. However, if you want to create something great, you have to think about how to do it correctly. In the long run, you’ll thank yourself for avoiding this shortcut.

Conclusion

In the grand scheme of things, using floats for layout purposes is a perfectly acceptable practice. We just want to make sure that you know the repercussions of doing so. As you can see by now, there are a lot of bad outcomes that can arise from using floats for web design.

If you’re looking for an easy way to achieve a certain design, then using floats can be a quick and dirty solution, but if you want to do things the right way, then it might be best to avoid them altogether.

About the Author

Tom Koh

Tom is the CEO and Principal Consultant of MediaOne, a leading digital marketing agency. He has consulted for MNCs like Canon, Maybank, Capitaland, SingTel, ST Engineering, WWF, Cambridge University, as well as Government organisations like Enterprise Singapore, Ministry of Law, National Galleries, NTUC, e2i, SingHealth. His articles are published and referenced in CNA, Straits Times, MoneyFM, Financial Times, Yahoo! Finance, Hubspot, Zendesk, CIO Advisor.

Share:

Search Engine Optimisation (SEO)

Baidu SEO: Optimising Your Website for Chinese Audiences

In today’s interconnected world, expanding your online presence to capture international markets has become essential. When targeting the Chinese market, …

Enterprise SEO: Everything You Need to Know

Are you looking to enhance your online presence and boost organic traffic to your website? If you’re operating on a …

10 Tested SEO-optimised Content Development Techniques

Content development refers to creating or improving material that conveys information to a particular audience. In addition to textual material …

7 Emerging Skills Every SEO Must Master in 2023

7 Emerging Skills Every SEO Must Master in 2023 One thing almost all SEOs can agree on is that SEO …

How to Use Keyword Intent to Maximize Conversion Rate

After keyword research, you’re armed with a list of potential keywords to target.  Let’s say one of the keywords is …

Search Engine Marketing (SEM)

Leveraging Social Media for Search Engine Marketing (SEM)

You’ve probably heard of social media, and how important it is to businesses and marketers. Chances are, you use one …

PSG Grants: The Complete Guide

How do you kickstart your technology journey with limited resources? The Productivity Solution Grant (PSG) is a great place to …

Is SEO Better Or SEM Better?

I think we can all agree that Google SEO is pretty cool! A lot of people get to enjoy high …

How To Remove A Web Page Without Affecting Overall SEO

Before removing an old page from your website, do you ever stop to think about the potential effect it might …

Toxic Links Threats and Disavows: Complete SEO guide

Your website is only as strong as the backlinks you have. We’re not talking numbers here but quality.  If you …

Social Media

How to Find Influencers to Promote Your Small Business in Singapore (Low Cost)

In today’s digital age, social media influencers have become powerful tools for businesses looking to increase their brand awareness and …

Instagramming Your Way to Success: Tips for Effective Social Media Marketing in the Travel Industry

Social Media has revolutionised how businesses connect with their audience. In the travel industry, where experiences and visuals play a …

The Rise of Influencer Marketing: Leveraging Social Media to Promote Your Travel Planning Agency

Social media has become an integral part of our daily lives. People from all walks of life use social media …

App Marketing on a Budget: Cost-Effective Strategies for Maximum Impact

In today’s digital landscape, app marketing plays a crucial role in driving the success of your mobile application. However, many …

Leveraging Influencers: A Powerful Tool for App Promotion

The digital landscape is continuously evolving, attention is divided among countless apps and platforms, and app promotion has become more …

Technology

The Rise of Influencer Marketing: Leveraging Social Media to Promote Your Travel Planning Agency

Social media has become an integral part of our daily lives. People from all walks of life use social media …

8 Strategies for Bug Hunting: Debugging, Testing, and Code Review

Bugs are among the most unpleasant aspects of the software development process, whether you’ve worked on a little side project …

How Does A Virtual Private Network Work

If you’re reading this, I assume you’re either a small business owner who’s looking to expand your reach, or an …

Digital Identity Theft: How to Protect Yourself from Scams and Fraud

We are always online in this day and age of technology, which makes personal data more exposed than ever. Digital …

The Legal Consequences of Cybersecurity Breaches in Singapore

Technology has advanced greatly in the digital age. It paves the way for a higher risk of cybersecurity breaches. There …

Branding

What Are Virtual Fitting Rooms and How Do They Work? (2023)

Shopping for clothes online can be tricky. It’s difficult to know how something will look and fit without trying it …

Planograms: What They Are and How They’re Used in Visual Merchandising

As a retailer, you know the importance of creating an appealing and organised display of your merchandise. The way you …

PSG Grants: The Complete Guide

How do you kickstart your technology journey with limited resources? The Productivity Solution Grant (PSG) is a great place to …

The Importance of Authenticity in Your Brand Voice Strategy

Most companies are aware of the value of branding. The reputation of a firm may make or break it, after …

Featured Snippet Optimization: Complete Guide In 2022

You’ve probably seen the boxes that pop up at the top of the SERP featuring a summary of an answer …

Business

15 Ways to Remain Empathic While Still Making Deals

Empathy is an essential quality in any negotiation. It allows you to understand the other party’s perspective, build trust and …

10 Prospect Qualification Mistakes That Are Hurting Your Sales

10 Prospect Qualification Mistakes That Are Hurting Your Sales Prospecting is one of the most important aspects of sales. It’s …

How Pros Write Business Proposals To Win New Clients

As a business owner or entrepreneur, one of the most critical skills you need to have is the ability to …

Baidu SEO: Optimising Your Website for Chinese Audiences

In today’s interconnected world, expanding your online presence to capture international markets has become essential. When targeting the Chinese market, …

Time Management Tips for Busy Entrepreneurs (Free Tools)

Are you one of the entrepreneurs juggling multiple tasks, constantly racing against the clock? Do you often find yourself overwhelmed …

Most viewed Articles

10 Ways to Improve Your E-Commerce SEO

If you want to grow your e-commerce business, you’ve probably thought about SEO (search engine optimization) already. After all, a successful e-commerce SEO strategy can

Other Similar Articles