Getting the best out of Cascading Style Sheets (CSS)

Cascading Style Sheets (CSS) have really changed the way we think about web page design, and they’ve certainly made creating awesome designs much simpler than it used to be.  Still, for such a great technology, there’s a huge amount that web designers and developers need to learn in order to truly master the entire skill set required to earn the title of CSS Ninja.

1. Create an organized library of CSS that fits your design philosophy

Every time you do something in CSS that achieves a perfect result, you should categorize it and file it away, so that when you need to do the same task again, you already have the perfect code available and ready to adapt to suit the needs of the new project.

2. Use the console to help you debug stuff

The console is a really helpful sidekick if you learn how to use it properly.  There’s one super JavaScript command you should never be shy about using, which is the log command.

3. Minification is not normally necessary for ordinary CSS files

Minifying is a big trend, but it’s not very useful when you’re trying to debug a problem to have to go and find some un-minified version of your CSS file before you can track down the bug, then rewrite it, and then minify everything again. What a waste of time just to save a few bytes!  Really, with internet speeds as they are, worrying about the spaces in your CSS file is just silly.  Consider instead not uploading that annoying and unnecessary Flash element.  That’s more of a problem!

4. Tidy code is good code!
If you just take a moment to indent all your CSS lines correctly and also group the attributes in some logical way (eg. put all the color information together, put all the positioning information together) or put the attributes in alphabetical order, it will be much easier for you to read and find the attribute you’re looking for and want to change.

5. Some truths are not entirely true

You can only have one element on a page with a particular ID attribute, right?  No, actually that’s wrong.  But you’ll see it written everywhere.  The truth is that although using multiple elements with the same ID is not normally a good idea, you can still do it if you want or need to.

6. Avoid shorthand declarations

This is related to tip 3, and it’s based on the same thing.  You don’t need to save space, and shorthand just leads to more confusion.

Comments

Post a Comment

Popular posts from this blog

Shopify VS WooCommerce - Which is the Best eCommerce Solution

If you worked before with WordPress websites , then you are already familiar with everything you can do on this amazing platform. Even if you are just now starting to learn it, you will soon find out that it was built for the people. This means that you don’t have to be a coder in order to build a WP website. Anyone can do it. Here are some of the reasons you should choose WordPress to build a website:     WordPress is free     There are plugins for anything you can think that you would need on a website     There are thousands of premium themes to choose of     Even if you need a custom theme, it will not cost too much     There are at least two dedicated e-commerce plugins that are efficient and reliable     For every problem you encounter, you will find more than one answers on the web due to WordPress’      popularity     Everything is customizable with...
Keep reading

Customizing the WordPress footer by adding widgets

The footer is often overlooked when it comes to designing a site, but it’s a great way to find contact details or other important pieces of information. People have been trained to look there since the days of letter writing. Even today if you look at any correspondence, utility bill or company letterhead you’ll find important information. On websites it’s an can be an important navigation tool, it can give you quick access to commonly needed pages that are not core to a site. In this quick tutorial we’ll be adding the ability to show standard WordPress widgets (like menus, categories or search) in your template. Adding a sidebar To start we need to register a custom sidebar that we’ll show in the footer.php. We do this in the functions.php of your theme. We need to hook in to the ‘widgets_init’ action using add_action and create our function Now we can add our sidebar using the register_sidebar function. All we need to do is specify the sidebars name, an id and description. We also...
Keep reading

Why Developers Should Embrace Progressive Enhancement

Mobile devices are growing in usage worldwide. People are buying more smartphones — and tablets — each and every year. Moreover, people are using their mobile devices more and more to access the web. It’s important to take the web experience on a mobile device into account. It’s important today and it will be even more important tomorrow as the number of users is constantly increasing. Progressive enhancement is a philosophy that makes sure that people have an easy access to your information, no matter their device; because it focuses on how you build your website. The philosophy of progressive enhancement During the 00’s, it was common to design for the latest and greatest browsers first. It’s a concept called graceful degradation, which means that you would first build for the newest browsers with the newest technological supports. Then you would dumb down the website for the browsers that were not as powerful and not as supportive. This is a top-down approach where on the top you ...
Keep reading