News:

SMF 2.1.6 has been released! Take it for a spin! Read more.

Main Menu

Interesting CSS stuff, part 2

Started by Bloc, April 05, 2015, 09:30:04 AM

Previous topic - Next topic

Bloc

In this second topic I will first link you to http://alistapart.com/article/let-links-be-links , a reminder that using javascript is a two-edged sword. Being modern, doing-it-all-in-javascript maybe be fun but making a webpage like an app is never a good idea. I don't think its that relevant in SMF theme making at this point, but its always good to be aware of it.

The second link http://www.impressivewebs.com/css-specificity-irrelevant/ is about how the use of classes is better, in the authors(and mine lol) opinion of course. Using ID's or even using native selectors is not to be encouraged. I especially like the part where using classes will put everything equally "specified", that is, id's for example will always outbid any classes so one should avoid them. Why is this important? Well, the use of id's will be a crutch the article suggests, just add the id and off we go with that style, done. Re-using classes will mean much smaller stylesheets and make it easier to find rogue elements. You will also be able to style a full theme faster with less styles to worry abut. IMO the CSS will also be more robust, there will be less smaller bits to worry about. If a class goes wrong, at least you know it straight away if its used several places - whereas an id in the recent topics template might go un-noticed for years. :P

The third link is what interests me the most atm:  http://alistapart.com/article/axiomatic-css-and-lobotomized-owls - since its suggests a rather new way of thinking about applying common styles. I usually try, as many others, to put everything more or less "blank" first, then set margins etc. on each item as its needed. Foremost using classes to do that though, so the styleheet won't be cluttered with umpteen id styles...but many times problems arise when adding new markup and you like to change those important class names for example. Example: items that should be inside a list or a grid - making gutters between them is always a pain the butt. The article suggests starting with this at the very first, by using universal selectors and rather adding blank(ified) styles as they are needed later. In other words, setting the mood on everything right away. The article does a much better job than me of conveying this thought process this lol, so I recommend giving it a read.

I haven't dared to using the latter thinking yet but it makes a lot of sense and it WILL solve certain layout problems for me doing it. For the second link I have already fully embraced it(and probably always have lol).

Continued Happy Easter. :)

Kelsey

Quote from: bh.kristiansen on April 05, 2015, 09:30:04 AM
In this second topic I will first link you to , a reminder that using javascript is a two-edged sword. Being modern, doing-it-all-in-javascript maybe be fun but making a webpage like an app is never a good idea. I don't think its that relevant in SMF theme making at this point, but its always good to be aware of it.

Thanks for sharing the links Kristiansen. I'm still quite a beginner when it comes to creaing web sites. I know a bit of HTML and a bit less of CSS, but that's about it, so I'm trying to expand my knowledge bit by bit in the confusing world of web dev. I have a small website hosted with 1&1 and I want to create a webshop soon so I'm looking at some useful web apps which I want to integrate first to my site and later also use them for my shop.

The article mentions that "single-page web app frameworks have gained traction because they can easily be used to create fast, complex applications that feel much more solid and interactive than traditional websites" but I'm not quite sure what is meant by single page app. Those are the sites that don't use a navigational menu but show the whole content on one site. Personally I also find this sites quite annoying, they tend to be quite confusing in my opinion.

Bloc

#2
Thanks for reading it. :)

"single page app" is probably meant that things happen only on that page, containers are updated dynamically. But the article focuses on other things too - using javascript to mimick things you should use the proper HTML tags for instead - and that I find to be the most interesting part. Its tempting to be clever and make something be quite another thing..but its important to remember that it isn't just PC's that read your site. :)

Kelsey

Quote from: bh.kristiansen on April 24, 2015, 12:10:45 PM
"single page app" is probably meant that things happen only on that page, containers are updated dynamically. But the article focuses on other things too - using javascript to mimick things you should use the proper HTML tags for instead - and that I find to be the most interesting part. Its tempting to be clever and make something be quite another thing..but its important to remember that it isn't just PC's that read your site. :)

Sorry for the late reply, I'm not that regular in this forum yet :) Using javascript is still quite far off for me, although I want to venture more deeply into web dev in the future. I just added some of these web apps (hxxp:www.1and1.com/web-apps [nonactive]) to my site, I'm using Blog, Compare Ninja, Slideshare and Statistics Summary and I'm learning HTML and CSS because I want to create some changes on my current site. Once I'm really a pro with HTML/CSS I will also teach myself a bit of PHP. I really love the PHP introductory videos by Eli the Computer Guy: hxxp:www.youtube.com/playlist?list=PL6C3CB409A8577C2F [nonactive]

His videos are very slow but he explains everything from scratch, perfect for people like me  ;D I'm not sure whether I want to learn JS at some point, I think it is just too advanced for me. I'm quite creative but not very tech minded. Already find getting my head around HTML hard enough  :laugh:

Advertisement: