DEV Community

Cover image for Style beautiful web pages without writing any CSS. Using W3.CSS.

Style beautiful web pages without writing any CSS. Using W3.CSS.

Corina Pip on December 08, 2018

Recently i was looking for a way to create some web pages to use in my upcoming technical workshops as demo pages. I did not want to spend too much...
Collapse
 
lazarljubenovic profile image
Lazar Ljubenović

No. From the WHATWG HTML spec, § 3.2.6 (emphasis mine):

There are no additional restrictions on the tokens authors can use in the class attribute, but authors are encouraged to use values that describe the nature of the content, rather than values that describe the desired presentation of the content.

It doesn't any sense for HTML, which is all about document semantics, to announce that an element is of type "padding-small". Use a class name to categorize an element such as "important-item", "feed-item", etc.

The article claims that you're not writing any CSS. Why in the world would you do class="padding-small" when you can do style="padding: var(--small)", which precisely describes what you want, and is a standardizes way of doing things?

Everyone goes bananas over inline styles, repeating a mantra they've read somewhere about how "it's bad practice", "anti-pattern", and then they splash a class="margin-top-medium". Totally not inlining styles. Nope, not at all.

Collapse
 
moopet profile image
Ben Sinclair • Edited

The dream of the semantic web is over, isn't it?
By which I mean, this is a mix of style and content which means that if you want to re-theme your website you'll have to change all the HTML :(

Collapse
 
squidbe profile image
squidbe

Indeed. I understand why some people choose this approach, but it defeats the purpose of classes. I want to define a class of objects which share attributes because those objects represent the same thing on the page (e.g., headings). Using, e.g., "w3-teal" on those headings is essentially just moving my CSS into my HTML, and making it more cumbersome to change that one color in the future. I'd rather just define my "heading" class with whatever shade of teal I want, then change that one color in one place in the future.

Again, I get why some people use libraries like this, but I've noticed a move toward this approach even when it creates more problems than it solves (it doesn't make sense for most enterprise web apps). And the unfortunate reality is that some developers just don't want to spend time understanding CSS to the degree that they do JavaScript.

Collapse
 
ohffs profile image
ohffs

I think tailwindcss is a nice middle-ground - you can use the pure 'utility' approach like :

<div class="shadow bg-primary px-4 py-8">Nav here</div>

But you can also 'compose' classes out of the utilities in your css/sass by doing :

.nav {
  @apply shadow bg-primary px-4 py-8;
}
...
<div class="nav">Nav here</div>

I've found it works quite well - those one-off things can keep their one-off utlities, but as you find common/re-used blocks and components you can style them as one thing.

Collapse
 
louislow profile image
Louis Low • Edited

Same here. I also can use Yogurt CSS to expose it's utility modules into a custom class for those who dislike to inline the styles in their HTML. And also, it is an easy and quick way to refactoring or migrating their existing stylesheet to Yogurt CSS.

<y class="nav">
  Who's stylish?
</y>
.nav {
  @extend
    .px-3,
    .py-2,
    .text-teal-100,
    .bg-teal-400;

  &:hover {
    @extend
      .bg-teal-500,
      .shadow;
  }
}
Collapse
 
moopet profile image
Ben Sinclair

That makes more sense to me because it's still keeping the presentation stuff in the presentation box.

Collapse
 
naasking profile image
Sandro Magi • Edited

Class attributes aren't semantic content, so nothing wrong with this approach really. The problem with inline styles is that they're too limited: you can't constrain by media queries or other pseudo elements or pseudo classes. Atomic CSS can handle that, and it does so in a way that's much easier to use than fiddling with CSS manually. I recommend checking out the tachyons CSS toolkit.

Collapse
 
imalittletester profile image
Corina Pip

That's true. They also offer something in regards to themes, but i haven't tried it: w3schools.com/w3css/w3css_color_th.... I think it all depends on the purpose of the development and what kind of pages you are creating. This is a quick win in many situations.

Collapse
 
qm3ster profile image
Mihail Malo

Why would your content be in your markup files? :O
It should be in the API/DB/CMS.

Collapse
 
thebouv profile image
Anthony Bouvier • Edited

You know there are static websites, right?

And I don't even mean generated static sites. I literally mean sites that don't need an API/DB/CMS because they are pure content and easy to manage in HTML?

Oh, say, for instance most sites hosted on GitHub Pages.

Resume sites. Portfolio sites. Restaurant sites. I can go on and on.

You don't need to over-engineer a 6 page restaurant site that hosts directions, menu, and simple things like that.

Don't overlook those pages -- they're still important and a big chunk of what the web is made of.

Thread Thread
 
qm3ster profile image
Mihail Malo

I find that unsustainable even for tiny restaurant sites.
For example, you likely have your contact info in the contact page and the footer of every page.
Assuming you at least keep your footers separate, that's still two places to change your phone number, working hours, etc.

And this isn't a root comment, this is a response to the person woeing over having to redo their markup for a restyle.

Well, guess what? CSS Garden doesn't work on real-life markup, only on intentionally superfluous one.

Collapse
 
lazarljubenovic profile image
Lazar Ljubenović

The dream of semantic web is far from over; it's on the rise with an evergreen HTML spec and always-up-to-date browsers. More and more "web designers" are finally realizing that if they don't drop their divs and start using semantic standard components, they'll never be able to cover all the devices which will change too rapidly.

Of course, you can always choose to ignore all that and use a ridiculous syntax like w3-padding-large, but then again, nobody can stop you from smashing your head against the screen either, right?

Collapse
 
imalittletester profile image
Corina Pip

I see you are totally missing the point of this article. I stated in the initial part how i came to use it, and what was the purpose for it. I had a specific requirement, and this is a solution to my requirement. Whereas you are free to express your dislike, and i'm sure you have better ways of doing things, please be respectful.

Collapse
 
tomekbuszewski profile image
Tomasz Buszewski

Hi Corina,

Atomic CSS was very "hip" some time ago, and I feel that today, when we build applications using incapsulated components, there isn't really a place for "atomisation". We have common styles and configuration, like fonts etc., but every component lives for itself.

Plus, to be quite frank, the syntax is horrible. Using ten classes to style an element that may appear a couple of times is a terrible redundancy and will hurt the document size, its parsing and further maintenance.

Collapse
 
katsanos_george profile image
George Katsanos

"but every component lives for itself"
Please dont' forget that just because many people decide to do "one thing" it doesn't mean it's the ultimate truth. People thought Earth was flat, smoking was good, cocaine was a good medicine etc.
Repeating CSS in every component just because "some folks at Facebook" said it's good for you isn't really a technically convincing argument.
Sure, component based architecture is all fine, but repeating a bunch of CSS properties to every component's scoped CSS will eventually add CSS size, impact performance, and make redesigns harder.
"the syntax is horrible" => subjective opinion.
Redundancy is not repeating classes, because classes ARE MEANT TO BE REPEATED.
Parsing is not impacted. Document size doesn't matter - it's cached anyway.

Please speak with solid arguments and not just personal preference. This type of engineers is what's most annoying in the job.

Collapse
 
tomekbuszewski profile image
Tomasz Buszewski • Edited

Hello George,

First off, this is a personal comment on a personal blog posting. It's meant to be subjective and I feel that I have justified my reasoning. This is no scientific debate that needs ten references for every sentence :)

I don't say that components are "the ultimate truth", but using such architecture for a long time (way before I started to use React or even Angular JS) has proven very performant. The key here is composition. If you compose your larger components (or, containers) with some smaller ones, you won't repeat your CSS. I don't think this is the place to discuss pros and cons of componetisation, given the fact that the article is about atomic CSS.

Plus, I still believe that using w3-btn w3-border w3-teal w3-margin w3-padding-large w3-left w3-large w3-opacity to style a simple button, an element that will be repeated multiple times, is redundancy. it will impact your document size and, even cached, it will have to be sent to the client.

Last, but not least, I don't believe that every decision needs only "technically convincing arguments". Sure, it's great to have those and take them under consideration. But if we would decide solely based on technicalities, we would all write using C or even low-level languages.

Now, please don't assume that I am against atomic architecture. I am not. If this suits one's needs – this is great.

Thread Thread
 
katsanos_george profile image
George Katsanos

We're engineers and our decisions should be based on engineering, not on number of blog posts / hype driven development.

Thread Thread
 
katsanos_george profile image
George Katsanos • Edited

Also I would like to point out words used in your original comment:
"atomic CSS was hip some time ago"
"the syntax is horrible"

you know what's horrible?

.header--login__buton { 
   display: block;
   padding: 10px 0;
}

.footer--menu__button {
   display: block;
   padding: 10px 0;
}

compare this with

<header>
  <a href="/whatever" class="block-button padding-s">button</a>
<header>
<footer>
  <a href="/whatever" class="block-button padding-s">button</a>
</footer>

Thread Thread
 
tomekbuszewski profile image
Tomasz Buszewski

George, this is misunderstanding of BEM principles. Your code should look like this:

.link {
  display: block;
  padding: 10px 0;
}

...

.header__link {
  color: red;
}

---

<header class="header__container">
...
  <li><a href="#" class="link header__link">Hi</a></li>
...
<footer class="footer__container">
...
  <li><a href="#" class="link">Bye</a></li>

Plus, BEM syntax also isn't the prettiest one :)

Thread Thread
 
tomekbuszewski profile image
Tomasz Buszewski

George, please don't exaggerate. Yes, our decisions should be based on knowledge, metrics, etc., but also on ease of development, entry and complexity levels, adoption etc. Those factors are extremely important. I know people that would even put those higher than sheer performance, simply because, when your code is really good, differences are a lot less significant than, for example, people quitting after three months because of the tech.

Thread Thread
 
katsanos_george profile image
George Katsanos

Atomic CSS is easier to use than juggling between nested selectors and having to write CSS classes like:
main__header--nav-home.
I think we analyzed enough. This is a technology blog and we should speak like professionals, not like fanboys

Thread Thread
 
jenc profile image
Jen Chan

chomps on popcorn

Collapse
 
tehmoth profile image
tehmoth

w3schools ;(

Collapse
 
mattmcmahon profile image
Matt McMahon

They don't deserve the hate they once did. It's a much better resource today than, say, 10 years ago.

Collapse
 
thebouv profile image
Anthony Bouvier

Yeah, that's not really a feeling anymore. Look at the statement at top of W3Fools:

w3fools.com/

Collapse
 
equinusocio profile image
Mattia Astorino

No, it’s still the most useless tool for developers. If you need an example, search for the css float property, and compare the result with MDN...

Collapse
 
equinusocio profile image
Mattia Astorino • Edited

Yes. It’s one one of the most shitty resource for developers.

 
lazarljubenovic profile image
Lazar Ljubenović • Edited

I never said anything about separation of concerns, not did I say that you shouldn't inline styles or that it's a bad thing to do.

There's nothing wrong with inlining styles.

But there's everything wrong with pretending you're not inlining styles when you add a class named padding-small which adds the style { padding: var(--small) }.

Collapse
 
skovorodan profile image
Никита Сковорода
Collapse
 
equinusocio profile image
Mattia Astorino

Hahahahhahahahahahahahahahahahahhahahahahahahahahahahahahaha

 
qm3ster profile image
Mihail Malo

Wow, that article has literally no left margin.
I wonder what the author meant by that.
Probably that the curtains were blue.

Thread Thread
 
lazarljubenovic profile image
Lazar Ljubenović

Maybe he forgot to add margin-left to the classes? ;)

Collapse
 
renoirb profile image
Renoir

I am boycotting anything W3School.

The issue I have with W3School is how unfair they are with overloading the W3 symbol (it's reserved by w3.org, where Sir. Tim Berners-Lee and colleagues writes Specifications for the web).

So, w3css is like what Microsoft does with "SQL", when they. SQL has a Specification, not written by Microsoft. Here, W3School isn't contributing to standards. And aren't fair-play with the W3 name.

w3fools.com/

Collapse
 
fluffy profile image
fluffy

How is this any better than just using inline style attributes?

Collapse
 
lazarljubenovic profile image
Lazar Ljubenović

So instead of learning some CSS, which is an accepted standard, you're going to learn this, which is a random array of string leveraging the class attribute which is not supposed to be used for styles at all?

w3-btn w3-border w3-teal w3-margin w3-padding-large w3-left w3-large w3-opacity
Collapse
 
katsanos_george profile image
George Katsanos

"leveraging the class attribute which is not supposed to be used for styles at all?"
Classes are not meant for styles?
Srsly?

Collapse
 
lazarljubenovic profile image
Lazar Ljubenović

Yes, "srsly". Go ahead and click the link if you want to see the source.

Thread Thread
 
katsanos_george profile image
George Katsanos • Edited

which link are you referring to? Listen, this:

So instead of learning some CSS, which is an accepted standard, you're going to learn this.

Is not a technically convincing argument - and it won't work to any future colleague.

Facebook is doing it. (check screenshot) Do they not know how to write CSS?
I think someone needs several years of hands on professional experience in big projects. Working and having a product owner/manager/boss who wants you to deliver is not the same as writing a thesis about semantic web for uni.
I learned CSS on a very good level and then decided to follow this pattern because I saw its' power and productivity. This technique has a big following of very VERY senior developers.

thepracticaldev.s3.amazonaws.com/i...

Thread Thread
 
lazarljubenovic profile image
Lazar Ljubenović

Alright, dude, keep rocking on.

Collapse
 
dizid profile image
Marc de Ruyter

Hi Corina,
for quick and decent design i've also found w3.css a very lightweight, easy to learn & implement solution.
Now busy with Vue.js i am using bulma.io which has a similar simplicity/elegance out-of-the-box.

Collapse
 
squidbe profile image
squidbe • Edited

Might not matter much to you since you're using a CSS framework, but I wanna mention how awesome Vue Loader's "scoped" attribute is -- it removes the challenges of globally scoped CSS without requiring you to utilize actual web components with something like Polymer. We have unscoped global styles for things like dropdowns, forms, etc. in our root component, and we just scope/customize other components as necessary. We used to practice BEM but just don't need to anymore.

Collapse
 
chriscthomas profile image
chris thomas

So this is just another CSS Framework, of which there are plenty. In the past I couldn't trust W3 schools because there were a lot of errors in their examples / documentation but they've really improved over the years.

That said, I don't know how new W3.css is but I'd stick with Bootstrap or Bulma over this as they are more tried and true / popularity in this case means trust.

 
equinusocio profile image
Mattia Astorino

I never said what is wrong or not. I wrote acss years ago and i just suggested you to see this thing from a different point of view...

Collapse
 
iamrorysilva profile image
Rory Silva

Shouldn't a professional be able to use the right tool for the right job? Why is everyone judging this hammer for not being able to drive a screw? I'm definitely not going to over-tool a landing page and contact form with a huge CSS framework.

Collapse
 
pzelnip profile image
Adam Parkin

As someone who just wrote a quick project that produced a simple HTML page with no styling (I'm a backend guy, so CSS has always been a struggle for me), this is a nice intro that comes at a timely moment for me. Thanks for sharing!

Collapse
 
equinusocio profile image
Mattia Astorino • Edited

Atomic CSS isn't a new thing. He's been around for several years and was born before all the new methodologies, and it's a bit obsolete in 2018 since CSS evolved and let us writing more maintainable CSS.

I tell you a thing.. each article about "How to do a THING" you will find an article telling "Don't do this THING"

I can't send you many links about semantic css, against functional CSS (ACSS). Maybe you are interested reading this for a different point of view.

maintainablecss.com/
ecss.io
robdodson.me/css-semantics/

Collapse
 
katsanos_george profile image
George Katsanos • Edited

I developed production-size websites and SPAs using functional CSS ( custom-made framework after years of writing CSS, following the logic of tachyons.io/ , and still adhering to principles of cssguidelin.es/ ) and the speed of dev/productivity but also Visual Consistency I was able to achieve with this system was unheard of. (before even Component based architecture was a thing)
The principles behind it?
-> Don't fight with CSS rules - write less of them
-> Semantic Classes are overrated and offer no real-world technical or business advantages (check Facebook's source code)
-> using functional/atomic CSS you can compose "visual components" (even when not using React or Vue) which are repeatable - maintainable - easily redesignable
-> seeing a design you can quickly abstract all the visually repeatable elements, code your base classes, use SASS variables, and have a first draft of your website literally in no time.
Sorry to generalise, but there was a mass influx of ex-backend devs when React et co became a cool thing, and many of them don't really know their shit when it comes to CSS. They just use CSS scoped CSS, repeat everything and think they're doing a cool job serving megabytes of code.

Collapse
 
beninada profile image
Ben Inada

Tailwind CSS (tailwindcss.com) is a great alternative to this with many configuration and integration options, third-party plugins, and an established community.

Collapse
 
equinusocio profile image
Mattia Astorino • Edited

Welcome to the “Learning libraries instead of technologies” era.

Collapse
 
thebouv profile image
Anthony Bouvier

Don't make that blanket statement. It solved a problem for the author, and Corina is a developer, so your statement is false.

Collapse
 
httpjunkie profile image
Eric Bishard

Interesting enough, I will try it out

 
imalittletester profile image
Corina Pip

Agreed.

Collapse
 
welcome_lyfe profile image
Welcome Universe

Would it not be better just to use Bootstrap rather than use the W3C? Is there any extra feature that it has that Bootstrap does not?

 
equinusocio profile image
Mattia Astorino • Edited

Please feel free to drop me a pm or tweet about your conclusions

 
lazarljubenovic profile image
Lazar Ljubenović

Yeah, same.

Collapse
 
sethusenthil profile image
Sethu Senthil

Hmm... Interested in how this framework compares with Bulma

 
lazarljubenovic profile image
Lazar Ljubenović

Yup, luckily he has no idea that changing styles means changing styles, and not changing markup. Ignorance is a bliss indeed!

Collapse
 
mrmindvirus profile image
Mr Monster

Are you serious now?
Thats for learning css as a standard.
Not for developing!

Try Bootstrap! Or other CSS frameworks

Collapse
 
croqaz profile image
Cristi Constantin

This is brilliant ! I love w3schools and it's amazing they built their own CSS framework !!

Collapse
 
naasking profile image
Sandro Magi

Probably better off with a more mature toolkit that's been around awhile: tachyons.io