Internet styling; can we break free from css and stylesheets?

Whilst researching my previous post, and during day-to-day development with CSS, I’ve come to realise the true dependency that the web has on CSS. No website on the internet would be the same without it, and it’s a tool for creating everything from wonderfully creative sites to simple but necessary readability of information. Without it, the web would be extremely difficult to use.

And yet, despite its prevalence and the reliance we all have, there are many within the industry who feel that it just isn’t up to the job any more. I did touch upon some issues in my previous post, but for discussion’s sake I will do so here as well.

The problems with CSS

Possibly the most common issue faced by a developer is that of size. Very quickly a site can become bloated with thousands of style rules, with stylesheets impacting the site’s page load speed dramatically. I find the first sign that I’ve done something wrong is when my site seems to have whole sections unstyled in IE8. Now, there’s a whole other debate about IE8, but the important thing here is the browser’s inability to process more than 4095 css selectors per stylesheet.

The CSS selector limit isn’t so much of a problem in itself these days, but it is a symptom of a larger problem. With that many selectors, especially early on in development, you are pigeon-holing yourself into a poor user experience with the stylesheet adding significant time to the loading of the document. And, as I’m plenty guilty of, many users will simply click the back button quite briskly if the page doesn’t load promptly. Minimal stylesheets are a necessity in the modern web, but CSS can easily facilitate the opposite.

Furthermore, CSS selectors are applied to every element in the document that it matches. This means that developers must create what I sometimes feel is a house of cards of style rules, in that removing a rule can have a catastrophic effect of breaking many more rules that relied on it, or that any rules the deleted rule took precedence over will now be applied in its place.

Is there an alternative?

Perhaps having been whittled down by years of CSS use, the industry has become saturated with methods for avoiding its use. Of course, with over 1 billion websites on the internet, there is never going to be a unanimous decision to do anything, let alone completely replace one of the fundamental cornerstones of what makes a website what it is.

Browser support for CSS is more consistent than ever (albeit with heavy use of vendor prefixes), so the industry is nowhere near a position to drop it completely in favour of something else. And after all, what would we replace it with? Some people are making an attempt, but the reality is that CSS is so deeply embedded in the internet and the industry that no large-scale migration could realistically take place.

Any solutions?

So, for the meantime at least, I think it’s safe to say we’re ‘stuck’ with CSS for our stylesheets. Faced with such a reality many people, organisations, and companies are taking it upon themselves to provide a means to make working with style easier whilst working with the technologies already available.

The first, which I discussed in a bit of detail in my previous post, is Nicole Sullivan’s Object Oriented CSS principles. As I previously mentioned, OOCSS is a methodology of writing CSS that encourages code reuse and provide more logical and easy-to-maintain stylesheets. In OOCSS, style rules are written as objects and applied to the markup where logical, instead of writing the CSS to match the markup.

OOCSS certainly does a good job at producing more logical stylesheets, and personally I cringe at the days before I took the principles to heart. And OOCSS only goes so far. It definitely does improve the usability of CSS, but what if your goal is to avoid using CSS completely? Well fortunately there are ways to do so, at least somewhat.

The ever-popular Bootstrap framework provides almost everything you could need straight out of the box. That means that, as long as uniqueness is not your project goal, you may not have to touch a line of CSS at all. Bootstrap comes with a fully built library of CSS selectors and modules for just about every use-case or content-type, so for people wanting to build something practical rather than pretty, and who want to avoid having to write CSS, Bootstrap comes with everything you need. Just include your class names and you’re all styled up. Completely plug-and-play, with the ability to include your own rules on top.

However an issue I’ve found with Bootstrap personally is that with so much functionality, bootstrap bloats your stylesheets – and thus your page load speed – tremendously. For large-scale projects with lots of features this may not prove to be an issue, but if you only want to use a small amount of what Bootstrap comes packaged with then you’re going to have to go through and disable all of the functionality you don’t need manually. This isn’t a massive problem, just turn on things as you need them, but surely we can do better?

How do we completely remove CSS from our projects? Inline styles of course! This may feel like a step back into the distant past, but actually it’s not so bad. A relatively newer framework, ReactJS by Facebook, used for creating user-interfaces, looks to provide the means to write the majority of your front-end project in just one language; Javascript.

This isn’t a blog post on React, in fact there’s already plenty of noise about React (especially within the Newicon office!), but there is one important point to make about it in terms of CSS; There isn’t any! At least, not if you don’t want there to be. React is designed to include all of its styles in what you might call ‘Javascript-land’ and load them directly into the DOM as inline-styles on page load.

This removes the global scope of all of your CSS rules, no longer matching every rule against the entire document. The cascade has been reduced significantly, providing much more maintainability without the hassle.

However, React has caused some negative noise as well. After all, it feels as if it goes against some very fundamental principles, not least of which is the idea of separation of concerns; CSS is for styling, so this isn’t even something you have to consider when using CSS, but using React it is. And what about specificity? By writing all of your rules inline, you’re placing them all at the very top of the specificity ladder, something that absolutely goes against the doctrine that web developers are supposed to adhere to. And from a content perspective, loading style into a page solely in Javascript means that anyone with a screen reader or with Javascript disabled cannot use your website!

Conclusion

So in answer to the question ‘is there an alternative to CSS?’ I would give the answer ‘no’. After all, as we saw, there are over 1 billion websites online all (presumably, to some extent) reliant on CSS and the browsers’ ability to interpret their CSS. However, if you were to rephrase the question to ‘can I get around using CSS?’ I’d say the answer is most definitely.

CSS will, for the foreseeable future at least, be the only real solution to stylesheets for web projects. There may be small-scale attempts at an alternative, but the industry at large simply isn’t in a position to migrate away from CSS. So for projects looking to score points in the style contest, it will unfortunately be CSS that will win them for you.

But for other projects, ones that aim only to provide functionality and user experience ahead of looks and individuality, tools such as Bootstrap make it incredibly easy to avoid writing any CSS yourself. You can write a whole project using predefined class names and never have to worry about browser compatibility, specificity, or maintainability.

And with tools like react, we now have the ability to decouple style from CSS as much as we feel is necessary on a project-by-project basis.

The industry is almost boiling over with technologies for every type of project conceivable, and from the research I’ve done for this post I feel as if the debate should no longer be about whether CSS is ‘fit-for-purpose’, because that idea seems illogical in a world where every project has a different purpose. It’s all about what best fits the project at hand.

What do you think is the future of webpage styling? Have you found any special tools for circumventing the pitfalls of CSS, or even have a good idea for doing so? I’d love to hear it!