After a while of working with CSS, in different projects and with
different people, I have realized that there is a lack of standards for
it. Like, when you have to make some corrections or improvements and open
the CSS file and you get a thousand lines of code with no comments at
all.
Well, I have a couple Ideas of how CSS should be coded:
The ABC of CSS
Keep it simple.
Imagine that every time you write a I’m always finding some code like this: As you see, it’s a common list an instead of using A better way to do this would be: You must use the correct tag; if you are not familiar with all of them Also, this is important because, it is easier for search engines to Try to put comments on your CSS. It is easier for others to see the comments and When you start making CSS, you can find it “easy” to put every element on Did you ever realize the huge differences between the browser when you put This happens because the browsers have different ways to render the elements I prefer to write styles for tags first, it’s something like starting from Remember to separate your CSS like modules, first, the body definitions, Sometimes you start to write CSS and then you get velocity, or you have a Well if you end up having that, you are doing it completely wrong. Take your time to write the CSS, once you get the expected result, Perfection is achieved, not when there is nothing more to add, but when there is nothing left to take away. There’s always a way to make your code look better. If you take care about I highlighted “always” with caps and bold, because it is something that we You don’t know where to start but you do it anyway. That’s not necessary if you take into consideration what you are doing right Always keep in mind the standards and validate your site using the All suggestions regarding good CSS writing, are about taking care of the Also remember the accessibility of your site, think of the people at all And for God’s sake… Code clean!!!!
painful huh?… Use only the necessary div tags. Think twice before writing a
one, because if you don’t care about it you will get a super complex page.
Always remember to keep it simple.
Use HTML tags for their propose
Potatoes
Apples
Watermelons
Oranges
Cucumbers
.
take a look at w3schools html reference.
Here you will find the complete list of tags with examples and everything you need.
identify your page and understand its code. Remember that search engines
are like a blind users.Use comments
know what the styles are being used for. // Common tags styles
a {
text-transform: uppercase;
}
// Header styles
#header{
background-color: #FFFFFF;
}
#header a{
color: black;
}
//end
// Left Menu styles
#left-menu{
font-size: .8em;
}
//end
Avoid absolute positions
the right place using absolute position. This is a very common, yet
incorrect method to align your elements. Sometimes when you use absolute positions,
you will get weird behavior after a window resize or in different
browsers or screens, just try to avoid it and use margins and
paddings to do the work. Always remember the box model.Ok, First steps
Reset your CSS
a text into a ? You will always face a couple of differences in
how each browser renders the elements.
of a page. An easy way to avoid this is by resetting your CSS, a simple
technique where you put all the style to 0/none by default.
You can achieve this by applying Eric Meyer’s css reset,
download it and put it on your public folder, or link to the url
directly.Styles for tags first
the general to the particular. In other words, make it general, and use
exceptions only when it is really necessary. body{
font-family: Arial;
}
h1{
font-size: 1.2em;
}
.secondary_pages h1{
font-size. 1em;
font-family: Verdana;
}
Be modular
then the header definitions, and so on.
Also separate them by files like main.css and form.css. // Header CSS
#header{
background-color: #FFFFFF;
}
#header a{
color: black;
}
// Left Menu
#left-menu{
font-size: .8em;
}
a{
text-transform: uppercase;
}
Do you feel like I am re-writing the whole bible? (Old and new testament!)
deadline, then you get yourself coding like a mad man. Tons and tons of CSS
lines. Then, you end up with like 10 different files with a thousand lines on
each one.
take a look at your code and try to clean the clean it.Antoine de Saint-Exupery French writer (1900 – 1944)
it you will get maintainable, very easy to read and understandable code.Cross-browser testing ALWAYS
forget about very often. We write and write CSS lines, and we test on Firefox or
Chrome because we love those browsers, and we are very happy about the way
our site looks, then after a couple of days of coding, you start thinking
about how it will look on IE… that awfulness all web developers fear to
see their work on. You test in IE and you realize that the entire
site is messed up, the whole layout is broken.
Begin making changes here and there and you finish with tons
of patches or writing a new CSS file just for IE.
from the first step. If you wrote 2 lines, verify in all browsers that your
style is working right. By doing this you will end with clean code and
compatible with all browsers.Remember the W3C
CSS and
HTML validators. If your code passes the validation, your site will
be readable for all browsers for sure.My final words
details. Details make the difference, you only have to put some attention
and code in the right way. Remember that sometimes your code is going to be
seen by other developers and you have to make it clear for them and for the
browsers too.
times… people with some illness or different capacities, like the blind
people and so on. You can check the Web Content Accessibility Guidelines
and try to at least complete the guides for Level A, the visitors of your
site will be grateful about this.
Processing.js.. "Something Completely Different"
Sinatra + Haml + Compass(SCSS) + Blueprint
You May Also Like
De Código, Café y Cervezas 08 – Web Services
What are ruby contracts and how we can use them?
Developing an Alexa Skill with the Jovo framework
The path of the Padawan
VTex Speed Configuration
The shocking truth about CSS Native Variables
