CSS => Too Complicated 😡
I'm a Web-Developer for about 4 years now and I love every aspect of it except for CSS. Don't get me wrong I do like CSS because it has so many possibilities. But that is kind of the problem. I'm currently building my own website and I'm struggling on how to setup my CSS. I'm developing all native but I was thinking switching to Bootstrap or something because designing isn't my specialty. I wanna start my CSS from zero so that all user agent styles are gone for my website but I also want to keep my CSS as little as possible. My head is currently exploding right now because I'm wasting time with this overcomplicated and stupid CSS language.
Summary: I just want an easy and effective way to write CSS code without any issues with user agent styles and responsiveness.
42 Replies
@Kevin Powell Now I don't know if its ok to tag you and if not I'm sorry but I really wanted you to see that as well.
Don’t start your CSS from zero. Most of the defaults are well-thought out and work. There’s no reason to remove them. Indeed, there are many gotcha’s that you’ll run into if you try.
Instead, adopt an additive approach: when you find something you don’t like, add a rule to change it. Use classes and descendant selectors liberally so you don’t run into specificity issues that frequently. And, when you feel like you need to add
!important it’s time to reevaluate your CSS and find out where the bug is and fix it.
Also, #📝rules 5️⃣ : no pinging Kevin (or mods) with questionsyour right Kevin also said in one of his videos that you should work with the browser and not against it
but im worrying about that some user agent styles might ruin my site
you cant stop that from happening
just make sure it is accessible
everything that the users do is out of your control, so, dont even think about it
Don’t worry about what the end user does. You can’t stop them from doing anything. Only worry about what you do. Do your best. If the want to need things up that’s their problem
i was thinking about building my own framework starting with the hard reset with:
* {
all: unset;
}
but im not sure how long it takes to setup most stuff again and what important rules i might forget to add back
N
nNO
nono
Don’t. That way lies madness
that is like taking a rocket launcher and obliterating your house with you inside
The only people who should be doing that are experts in design and the web. And that is a very few number of people indeed
💀
seriously, dont do it
Use the default styles until you have a good reason to override
so you guys say i should just write minimal css code working with the defaults and not against
YES
we didnt say minimal, but yed
if yes then should i style include a box model reset with margin and padding etc none
no
that's like putting mines on your house and dancing around
cmon man that cant be too harsh its just preventing layout defaults
some elements will stop working properly if you do that
for example, lists will have all sorts of issues
wait lemme show you an example
* {
margin: 0;
padding: 0;
border: 0;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
your telling me thats bad
the defaults for "layout" is no margin or padding
The top is BAD. The bottom is good
dayum
but you are doing the reset for EVERYTHING
Why? What benefit does this provide? Hint: none
if you want to make it worse, add
outline: none
then it's trully cursed...Change things when you need to, ands there is literally no need to nuke padding/maring on everything
guess what i did that in my early stages of css
including other random stuff in the universal selector
Advise the browser, don’t micromanage it
that is horrible
like resize both and overflow auto on EVERYTHING
dont ask me why
...
cursed
ik
at least you didnt put the font-size to 62.5%
yh
wdym
To go back to the topic as-written. CSS isn’t too complicated. You’re overcomplicating it
if you have to delete a default, you better have a very good reason for it
lemme find some old bad CSS code from me for fun
there are some defaults you will want to change, like the width of inputs, the font of textareas and the margin around the body
but if you nuke everything, you will add everything back, probably with the same exact values
OH NAH
I FOUND A CURSED EXAMPLE
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: system-ui, Arial, Helvetica, tahoma, Verdana, sans-serif, monospace;
outline: none;
border: none;
appearance: none;
user-select: none;
overflow: hidden;
letter-spacing: 0.5px;
}
body {
width: 100vw;
height: 100vh;
display: grid;
place-items: center;
overflow: auto;
}
that aswell
@ἔρως
that is cursed indeed