Tinkerbin
Play with HTML, CSS and JavaScript and see the results right away
The Greatest tool for sorting CSS properties in specific order
I like to code cleanly. I like code to be
- indented
- commented properly (uncommented code is gibberish and I fail to understand why people write that kind of code)
- lots of blank space (very rarely real estate is cheap so use it when available for free)
I have never repented writing tidy code no matter how much time it has taken and mind you it has pissed of many people (I do not blame them because you need to be a sensible coder to understand the importance of writing neat code).
CSScomb is an excellent tool for guys like me. It cleans up CSS code by not only indenting it and making it neat but by also putting the css properties in the right order.
CSS Specificity rules!
Below is a basic outline of how any given CSS-styled document will decide how much weight to give to different styles it encounters. This is a general summary of the cascade as discussed in the spec:
- Find all declarations that apply to the element and property
- Apply the styling to the element based on importance and origin using the following order, with the first item in the list having the least weight:
- Declarations from the user agent
- Declarations from the user
- Declarations from the author
- Declarations from the author with
!importantadded - Declarations from the user with
!importantadded
- Apply styling based on specificity, with the more specific selector “winning” over more general ones
- Apply styling based on the order in which they appear in the stylesheet (i.e., in the event of a tie, last one “wins”)
With that basic outline, you can probably already see how !importantdeclarations weigh in, and what role they play in the cascade. Let’s look at!important in more detail.
CSS 101: interactive tutorial
Another good resource for learning CSS and his has live examples for you to see which can be tweaked.
What Advice Would You Give to a CSS Beginner? | Impressive Webs
Very good resources for learning CSS
Max CSS In Depth / Daniel Eden
Daniel Eden suggests that developers and designers should make a uncompressed CSS file available with the compressed CSS files purely for the purposes of helping other web developers and designers understand how the CSS has been used.
There were a lot of people who were opposed to the idea and he counters their thoughts in this post.
Web developers and designers community is one of the unique communities where peer to peer sharing and learning has been the norm and it should not be changed.
Bootstrap from Twitter | Twitter Developers
One of the best tools for front end designing. Thanls to @mdo and @fat for sharing this with the world.
Normalize CSS for standard website designs
Normalize CSS is the code that I use for every project I undertake, What Normalize CSS is a CSS which makes browsers render all elements consistently in line with the normal standards that are advised. The file was originally developed by Nicholas Gallagher and he has also been helping in keeping it updated. For those who are not aware Nicholas Gallagher has been acitively helping the community and one of the well known project is boilerplate. You can get the file from Github repository.
Safe font packs for web design
Font Family Groups | Adaptivethemes
Quick list of some handy font family groups (often called “font stacks”) for web design and Drupal theme development. Includes the three groups that come with Adaptivetheme starter theme and an example of how to set the font-family in your CSS.
These are going to be obsolete because of Google Web Fonts but nevertheless you can use them if you want to use safe web fonts.
Practice graceful degradation technique when designing in HTML and CSS
Techniques for writing HTML and CSS code
The developments in the arena of HTML and CSS are so fast it is tough to ensure that the latest techniques are used while creating the code. What further complicates things for designers and developers is that browsers are updated randomly and different elements of HTML and CSS code are implemented at a different pace.
Graceful Degradation is a term used for
writng code where the code is first written catering for the latest techniques and then fixing things so that they work for older technologies
. For example you would code your website so that users are able to browse the website properly using the latest browser like Chrome 16.0.912.63 m. Once the code is written later you would write the code so that the website is displayed properly using other browsers like Firefox.
The opposite of Graceful Degradation is Progressive Enhancement.
When practicing Progressive Enhancement code is written so that it displays properly even if basic techniques are supported
(for example write the code for Internet Explorer 5.0) and then gradually update the code to take advantage for the latest techniques (like for accessing the website using Internet Explorer 9).
Both the techniques are practiced by developers and designers as both of them have their own advantages and disadvantages. Which one do you practice?
