CSS like a Lego

With all my work at bayt.com, I’d been think more about CSS architecture, how to write the qualified, meaningful, reusable classes.

So I want to share with you my secret of how to think and write the CSS, actually for me I found the fantastic way is the Lego way.

Why Lego?
Because it’s like a bricks can be assembled and connected in many ways, to construct such objects/classes as vehicles, buildings, and even working robots.

For example, when I need to write a grid layout, I have a ready classes to do it so I don’t need to write any inline style, so I am just write an HTML tags and put the appropriate class(es), and another example also CSS sprite technique, I have built an image to put all major images/icons, check the following link:
http://img.b8cdn.com/images/icons/sprite_all.png
so I am prepare class to handle all major positions of images so what I need when I put any image just the image-position.
And there is more and more layout pieces you can think it like this.

So my advice to all front end developer or web developer when he/she need to write any CSS to think it like a Lego, because it will save your time and make your process easier, and there is a CSS framework I recommend you to start with it ( Bootstrap ).
And don’t forget to make sure it’s tested on all major browsers.

13 thoughts on “CSS Like a Lego

  1. I do believe all the ideas you have presented on your post. They are really convincing and will certainly work. Nonetheless, the posts are very quick for newbies. Could you please prolong them a bit from subsequent time? Thanks for the post.

  2. Can I just say what a aid to find somebody who actually knows what theyre speaking about on the internet. You undoubtedly know learn how to bring an issue to light and make it important. Extra individuals need to read this and understand this aspect of the story. I cant believe youre not more common since you undoubtedly have the gift.

  3. I like what you guys are up too. Such intelligent work and reporting! Carry on the excellent works guys Iˇve incorporated you guys to my blogroll. I think it will improve the value of my website 🙂

    1. What’s up colleagues, its wonderful post CSS Like a Lego | Islam Al-Zatary regarding cultureand entirely defined, keep it up all the time.

  4. Highly descriptive blog, I liked that bit. Will there be a part 2?

    1. Oh my goodness! an wonderful article dude. Thank you Having said that I’m experiencing issue with ur rss .

  5. Hi, just wanted to tell you, I enjoyed this blog post. It was funny. Keep on posting!

  6. balenciaga replica…

    I am actually grateful to the holder of this web site CSS Like a Lego | Islam Al-Zatary who has shared this enormous post at at this time.

  7. Great information. Lucky me I discovered your site by accident
    (stumbleupon). I have bookmarked it for later!

    Stop by my page: Cheap tv stands

  8. Hello there I am so glad I found your site, I really found you by mistake,
    while I was browsing on Askjeeve for something else, Nonetheless
    I am here now and would just like to say thanks a lot
    for a incredible post and a all round enjoyable blog (I also love the theme/design), I dont have time to browse
    it all at the moment but I have book-marked it and also
    included your RSS feeds, so when I have
    time I will be back to read more, Please do keep up the great work.

  9. If some one wants to become updated with latest technologies therefore he has to be go to
    see this web site and stay updated every day.

Leave a Comment