Since the inception of the internet, CSS and HTML have been tied together in a conjugal bond. While HTML is possibly an easy markup language to learn, CSS can be quite a challenge.
Nevertheless, achieving the gorgeous layout that boasts a clean look and beautiful backend isn’t out of reach. Like any other craft, it requires practice and deep understanding of what’s at hand.
To give you budding web designers and developers a head start, we’ve compiled 20 of the most essential CSS tips and best practices that you can try to achieve a fabulous front-end.
Let’s get started!
Use style-sheet inheritance
Use a single CSS file for the entire project. This makes editing and updating easy. If you must use several style-sheets, be sure that they utilize only implicit properties while inheriting common properties from best level style-sheets.
Understand when to use IDs & Classes
IDs and Classes are probably the most misused styling components in CSS. The difference between the two is simple – use IDs when you don’t need to repeat your style for over one element and use Classes to style several elements.
Give logical names to IDs & Classes
IDs and Classes need to be logically named and should correspond to the tags that their styled. This is vital for code organization & debugging.
Style top level elements first
CSS is complex and the order in which elements need to be styled is very important. The general guideline is to always style top level elements first followed by inner elements. For example, HTML and BODY tags ought to be styled prior to styling encapsulated DIV tags.
Center elements through style-sheets
Never use center tags to center align elements. This strategy is obsolete. Instead, use style-sheets to center text and areas of the HTML file. This could be done through the margin property & text-align property.
Understand the CSS box model
Understanding the CSS box model is important to effectively position your elements. Cascading style sheet box model makes life easy for designers and developers.
Then shift to the Flex-box model
The box model is good enough to implement web page positioning, however CSS3 has launched the flex-box model that’s even simpler and easier. It’s the future of CSS.
Positioning with CSS
While HTML enables you to control the position of elements through tables and the use of non-breaking space, you can’t position things precisely. With CSS, you can place an item on a page with exact X and Y coordinates. This is important for any web developer. Understand CSS positioning before you try creating a layout.
Move to CSS3
The majority of development is now done with CSS3 and HTML5. To have a competitive edge in the field, it crucial to have a solid base of CSS3 principles.
Reference only one style sheet in the markup
Rather than including x number of style sheet references in each document, only include one and import the rest of the style sheets into one. It’ll be a lot faster while you’re working on a complex task to avoid needless HTTP requests.
Always specify media types
Specify media types within the style sheets. Don’t utilize the media feature on link elements or any place in the HTML—but rather specify media types either through @media rules or when importing.
Avoid resetting style sheets
Reset style sheets in general have two disadvantages – unnecessary AND redundant code. Reset style sheets that can’t even be customized will introduce both issues and since the majority of styling differences are simple to spot anyway, it’s generally best not to utilize resets at all.
CSS browser compatibility table
We all know every browser has different methods for rendering CSS styles. It is best to have a chart for reference, or a list that displays the entire CSS compatibility for each browser.
Keep CSS code clean
If your CSS code is not clean, you’re going to wind up coding in confusion and having a tough time referencing the previous code. For beginners, religiously make appropriate indentations for commenting effectively.
Learn to use Debugging tools
There are a ton of browser-based tools tools which can highlight CSS of the web page that debug on the fly as you hover over a specific tag. Here are a few good (and free) CSS debugging tools: DOM Inspector, FireFox Web Developer, Firebug & Internet Explorer Developer Toolbar.
Use Shorthand CSS
When possible, try to use Shorthand CSS. It offers a quicker way of writing CSS code and most importantly – it tends to make the code cleaner thus easier to understand.
Typography
It is not hard to use clean and simple text on your pages, rather than letting Internet Explorer and Firefox default to the serif-heavy fonts on Linux and Windows. Try adding this to your primary style sheet:
body
{
font-family: Arial;
font-size: 95%;
}
Arial isn’t great, but it’s not too bad either. By clearly setting a font, you pull yourself away from being a victim of the OS/browser. It’s especially useful when you don’t have spare laptops lying around for testing purposes.
Span and Div tags
You can use cascading style sheets on more than just <span> and <div> tags. Ensure that you style every little thing that makes sense in your file. Newbies invest a lot of time attempting to convert their websites to span and divs, when it isn’t necessary. Remember that you can style any tag you have to.
Style the larger elements first
Whenever you style a page, have a plan and structure in mind – <html> and <body> and then the greater elements like <p> and so on. In fact, consider giving all your web pages the style of HTML. Then you have a standard palette to work from.
Practice is key
The web is filled with free resources that’s available if you look for it. Code samples and tutorials are abundant. Each time you come across an amazing web element that’s visually attractive, have a look at the source and CSS using Inspect Element or Firebug.
So there you have it, 20 awesome CSS web design tips. Remember to always plan what you would like to achieve before you start and this will make your life easier. It’ll save time in creating websites and the results will be better for you and the user.
About Navid Tayebi:
Navid Tayebi has considerable experience in digital marketing and brand development. He is the founder of Creative Over, an Orange County web design agency, CA that primarily focuses on providing digital marketing solutions to small- and medium-sized businesses. He is a versatile, organized and self-reliant person. His areas of expertise are refinement and development of marketing goals, promotional activities, pricing strategies and branding. You can find Navid on Twitter, Linkedin, Google + and Facebook.
