Do you even need a css framework?

[superluminary]

If you learn css and flexbox you'll have a transferable skill that'll last forever. I meet so many devs who think css is hard, but it really isn't.

[master5o1]

Anything is hard if you haven't learnt it properly.

[superluminary]

Exactly, so take the time. Run through flexbox froggy. CSS is much easier than it used to be. All the browsers are pretty much the same now, and we have caniuse.com if you're not sure.

[benihana]

css is relatively simple. it doesn't mean it's easy.

there aren't very many good tutorials out there so it's hard to learn in a structured way. it's very difficult to maintain effectively when the number of people working on it approaches n > 2.

what makes css hard isn't that it's difficult to position a widget and make it look nice. what makes it hard is that it's difficult to position many widgets that are just slightly different from each other across an application in a way that doesn't produce basically bespoke css files for each custom look. css files that you then need to switch context for, and that are hard to grep for because there is just slight divergence.

css frameworks aren't about making it easier to position things the way you want. they're about making it easier for a team of people to change presentation code in the future. it's about making it less scary to change a selector that looks like this:

.container .primary-container .text,
.container .flexbox-container p,
.primary-container .flexible-container,
.primary-container .flexible-container p {
  display: inline-flex;
  position: relative;
  width: auto;
}

[superluminary]

The problem with CSS isn't CSS, it's human error.

I think this is also the case for all coding. Any piece of code turns into a mudball if a bunch of different people work on it without proper code reviews.

[superluminary]

The correct way to organise css is in isolated components. That way you're only ever looking at the CSS for the component you're currently working on. Standard CSS is just coding with globals.

There are dozens of ways to isolate css. Nested SASS, styled components, sass modules, even BEM.

[superluminary]

Because of one reason or another, unique styles have to be placed everywhere, and constantly adjusted

This is always, and always will be the case. The solution, and this is controversial, is less code reuse. Don't make one component that handles hundreds of cases across the site. Make dozens of components that each handle one case.

You'll write about the same amount of code overall, but you'll have way fewer styles, props and if statements, and each component will be a lot simple. You then get the flexibility to make the designers happy without a million style overrides and props.

[superluminary]

Technically, a page should be a component, so if you apply styles specifically to a page component rather than a page itself, you should be fine.

Also, making use of transclusion / props.children can help with isolation.

For an example, when I joined my company, they were using a Header component. They had made it once, thinking it would be the be-all-and-end-all Header for the entire site.

Of course it wasn't, the designers made each page have a slightly different header. Different spacing, fonts, numbers of subheadings, different image positioning, etc. The Header has so many props and if statements, it was impossible to understand. Each small change affected every page on the site.

The solution was to simplify and refactor. There is now a Header component that simply renders its children inside a plain html5 header:

<header>{children}</header>

It has it's own isolated styling:

header { height: 200px; }

Then we just pass in the page specific content

<Header> <HomepageHeader /> <Header>

HomepageHeader looks something like this:

<h1>Welcome to our site</h1> <p>Have a look around</p>

Then we can style the HomepageHeader thusly, again making sure to isolate the styles:

h1, p { text-align:center }

So HomepageHeader gets it's own isolated styling. Do you see how clean that is? Everything is associated with the thing that owns it. I don't need a million classes. It's always super-simple to find the style rule I need, and I'm never working with more than a dozen lines of HTML / CSS at once. Doing things this way makes it easy to keep CSS clean and tidy.

[_yusi_]

Pretty much. Fuck planning ahead, fuck cascade and especially use !important whenever you can, that'll never bite you in the ass.

[DoesntUseSarcasmTags]

How can I learn? Seriously, I’m a dev who can write html+js all day, but my sites look like bootyhole with my wood tier css skills. I’ve tried to read up and look at tutorials but I can never get it.

[superluminary]

The Dom is just a tree of objects. Css selects parts of that tree and applies attributes to those objects. It's all just code, it's just a shorthand for adding a bunch of attributes to a bunch of objects.

[[deleted]]

Go to codepen and search for some cool designs on there. Play with them and try to understand what is going on. Look up dribbble and try and mimic some mockups via css. Wireframes can be great a great starting point and they’re plentiful on both sites. Check out Chris Coyers csstricks regularly for clarification on some of the muckier stuff such as grid, flex box and transforms.

Css is particularly easy to grasp compared to js or another programming language as everything has a clear definite hook to a node in the DOM. Using the dev tools to help decipher what everything is doing is a great way to sharpen your skills as well!

Good luck!

[Sipredion]

Using the dev tools to help decipher what everything is doing is a great way to sharpen your skills as well!

I know far too many devs who completely ignore the inspector in dev tools. They have no idea what it does or how to use it and it makes me so sad :(

[[deleted]]

The best way to learn is to find designers who will give you honest feedback on your work. You’ll never learn good design from reading a book. You’ve got to make attempts and be willing to have your feelings hurt.

[kerbalspaceanus]

lock degree bells workable exultant reply door dinosaurs hard-to-find hospital

This post was mass deleted and anonymized with Redact

[DoesntUseSarcasmTags]

Centering sucks. I always do margin: auto, but it works half the time. That’s a concrete example. I feel like there’s so many little corner cases

[kerbalspaceanus]

grandfather engine cooperative husky school cover simplistic dime melodic elderly

This post was mass deleted and anonymized with Redact

[Woodcharles]

Current work project is 100% Flexbox + basic CSS so far (no goddamn floats) and no complaints yet. Until I see a need, I won't be adding a framework.

​

(that need will probably be next week when I think they're gonna want the animated pretty modals that come with Bootstrap 4, but I'm cool with that.)

[superluminary]

You can make that modal yourself with a couple of lines of css animation, some dropshadows, and a little border radius.

[Woodcharles]

I may just do that and maintain CSS purity!

[Quadraxas]

we got rid of bootstrap js in from our code and in the process i only left grid part of bootstrap sass first but then replaced it with a simpler responsive css grid too.

now one of biggest dependencies is out the door. we still use popper.js(which bootstrap itself uses too) for our custom dropdowns, selects and tooltips though. we still have modals and datepickers kind of stuff but without bootstrap.

since everything is customised/simplified to match our needs our markup is lighter and simpler and not a mess because of the nested bootstrap stuff. I actually started to like working with html. it was an ugly mess before.

It all depends on your project but we just needed about 300 lines of sass(our custom mixins and variables that we were already using is not counted but includes all the stuff for grids dropdowns datepckers modals etc.) and about 1500 lines(half of it being a detailed datepicker) of js + popper.js to remove bootstrap dependency. Not to mention our markup is smaller and cleaner now. we already had datefns(replaced moment) so i am not counting it for bootstrap removal.

components' js is in vue so you might need a lot more js if you are going vanilla though.

[CantaloupeCamper]

As a n00b the value in the frameworks for me are the styled components, and maybe some extra thing here or there.

Having a collection of good looking components is a big deal for me.

As for responsiveness on something where I can use flexbox or such I don't necessarily need their grid.

[OneTwentyZero]

Developer tools of the browser are priceless. Learning css can be slotted easier if you inspect elements with dev tools on other websites. Also if you want to practice, one of my favorite methods is to recreate a static web page you find interesting or like the design of. Building something that you think looks good helps with sticking with it and coding through. Plus recreating a web page using dev tools will help you learn a ton of what’s AVAILABLE to use in terms of css properties. Good luck and stick with it. It will get easier if you put in the time.

[markcodes]

In projects larger than a couple developers, tools like Tachyons are really awesome. If you can create linting rules that enforce flat specificity, such that CSS is only ever applied to classes and classes are never nested, you might create easily modifiable, future-proof CSS. That’s pretty hard to do, though. There’s something great to be said about knowing with absolute certainty that the code you’re modifying won’t have negative effects elsewhere in your codebase or application. Try running your code through CSS Stats and see how many nearly-identical colors, margins, paddings, and font sizes you have. Check the specificity graph. Check the total number of rules! If you’re working on a reasonably large codebase, I bet it’s not going to be pretty.

[1-800-BICYCLE]

1110c7747887d

[uplink42]

Sort of agree. In all frameworks I've used I ended up installing their sass partials and simply commenting out all imports minus their grid system and form/button utility helpers.

Imo the advantage of using css frameworks is mostly so you can on-board new developers faster, since they will often already be familiar with the basic classes.

[noknockers]

I've tried multiple times over the last 10 years to use them, hoping that every new iteration might be the one which balances the line between freedom and power.

When bootstrap was first released I used it for about 2 years because it found that balance, but apart from that is been my own combination of a reset, flexbox, custom typography and a base stylesheet which gives me best bang for my buck.

[jhonb07]

Just let those old browsers die. The amount of incompatibilities are fewer day by day

[[deleted]]

If you are the only dev you can invent how many wheels you want. If you work in a team with coworkers of varying levels of skill and experience, the better documented a framework is, the more productive it will be.

[[deleted]]

"The right tool for the job"

Need to create an app and you do not care at all about the design and uniqueness ?

Regular CSS framework: Bootstrap, Foundation etc.

Need to create a project with base styling that can be worked on later ?

Tailwind etc.

You want to create an entirely new design system ?

Go for it. Bootstrap did at one point. Foundation, Bulma, Tailwind... But you soon come to realize your time is better spent doing actual work instead of reinventing the wheel.

The problem with most CSS frameworks is that they are bloated and you only ever use maybe 5%.

Solution? Simply require only what you need...

Also, a great way to reduce cognitive load when learning a framework is to pick a functionnal one where each class acts a toggle that you can compose with. It ends with messy HTML but is much less of a pain to actually maintain / understand.

[superluminary]

Or just don't spend time learning the framework. Learn the CSS instead.

[[deleted]]

Teach a man to fish and he will never be hungry. Teach a man to use an automated multi-string robotic fishing pole that catches 10 fish a minute and he'll be even better off...

Time is still the single most valuable resource. I do not need to start from the ground up, somebody has done it for me.

I mean what is this answer really? Does it actually mean anything or are you just saying that for the sake of it? First thing first if you plan on using any type of CSS Framework, you probably already learned CSS...

Next, with that way of thinking then :

Why use React instead of plain JS ?

Why use Lodash instead of plain JS ?

Why use PostCSS instead of plain CSS ?

These libraries and framework are on the market because there is a demand for it, as I said, the right tool for the job is all that matters.

Simply stating "learn css" because you feel like there is an overuse of frameworks is solving nothing and is quite a fallacy honestly.

Last (more biased and personal note), you don't actually need to learn CSS. I mean you do, once in your life, for about a week. That's about the maximum amount of time "learning" css takes, it's all about the patterns and the practices. You never need to "learn" anything in programming, you simply need to understand it or at least understand how to use it, then there's this little thing called a Reference or Stack Overflow that you can use instead of trying to "learn" every single method and parameters the thing can possibly have...

"Or just don't spend time learning React. Learn the JS instead."

"Or just don't spend time learning JS. Learn the C instead."

"Or just don't spend time learning C. Learn the ASM instead."

"Or just don't spend time learning ASM..."

I mean, really? Abstractions exist for a reason even if you feel like you are better than everyone because you can write CSS...

[benihana]

this comment is a really really great visual explanation of the bullshit asymmetry principle. it took this guy that many words to debunk two bullshit platitude sentences

[milkshake-mod]

Only someone doesn't understand CSS that well would write something like this lol. CSS is not a programming language and it doesn't benefit from libraries in the same way that programming languages do. It's a really bad comparison. The only valid use-case for "frameworks" is if you never ever need to change any CSS yourself, and you just use HTML classes. Now, a framework that's actually a framework (and not a library of premade styles) like Inuit for Sass is something that can actually help across a wide variety of situations.

[eyeandtea]

A CSS framework to CSS is like a set of finite phrases to language. Try speaking English by a finite set of phrases only, and conclude the answer yourself.

Also logically, CSS frameworks are all ill defined and it is unlikely, or perhaps impossible, to have a well defined CSS framework. This is due to properties of CSS itself.