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.
74 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
Since you're asking... if you've got time to spare, it could be a good idea to try making a project starting with
just to see why you wouldn't want to do that 😄 - if you think css is too complicated, this will show you how sane the defaults are, and how much they simplify things!
(Unlike the others here, I do like to remove the margin from most elements though... but it does mean re-introducing spacing in one way or another, and I also target the elements I want in my reset, like
h1, h2, h3, h4, p, ul, ol) and I leave the default padding for lists, etc.
Look up "modern css reset", there are a few good ones, like Josh Comeau's, Andy Bells, and 2-3 others that will be near the top of the search results, and they many (like Josh's and Andy's) come with a blog post explaining each line.
You'll also notice that they are pretty simple, in general. They don't make any huge changes, just small tweaks.
I should do a live stream where I start a project with all: unset 😄A really good "reset" to look at is Jen Simmon's CSS Remedy. It has comments explaining each item as to why it's there and what it does.
Unlike the others here, I do like to remove the margin from most elements though– @Kevin Powell It's not that I don't think it should ever be done, but when someone isn't sure how CSS works it's a bad starting point. Learn the rules first before you break them, right? You can do it b/c you know what you're "breaking" by doing so, not so much for a lot of others :p
good point, I already have things in place (or at least a plan in place) for how I'm going to deal with that 🙂
Same advice given to writers: learn the tropes of your genre and why they're there. Once you know why they are then you can subvert them.
One thing I will say, @CodeMoon07 is that it sounds like you are talking about writing CSS and designing the site in the same breath. You mentioned design isn't your specialty, and that's the thing with CSS, it's not about creating a design, but about making a design come to life in the browser. Actually creating the design for a good looking website is a totally different skillset. There are a lot of insanely talented CSS folks who don't have very good design skills, but they can take a given design from a static design file and make it come to life in the browser.
If you're trying to design in the browser, but already struggle with CSS, it's going to be hard, because you're doing two things at once, both of which it sounds like you struggle with.
Sorry for responding so late but I would love to see you stream with the all unset (If you haven't done that already). Honestly CSS is a great "language". Last night I was in a focus state designing my own website 😂. But the advice that really helped me is that you should work with the default and not against it. Kinda like Kevin once said in a video to work with the browser and not against it.
when you start working against the browser, for absolutely no reason at all, you're on an uphill voyage on shit creek with no paddle
just wasting time doing what the browser was already doing, and on top of that you have to fix what you broke
My fav reset is just a box model reset and imgs etc to display block and 100%
Your right
also, set the font to italic on images
For the alt text?
Can i also do font style italic on videos and stuff or only on imgs
yes, for the alt text
so it makes it absolutely obvious that the text shouldn't be there
Removing the browser defaults >>>>
tell me how your doing it @vince
he can't list it, because the bullet points are broken and misaligned
A Modern CSS Reset • Josh W. Comeau
I have a set of baseline CSS styles that come with me from project to project. In the past, I'd use a typical CSS reset, but times have changed, and I believe I have a better set of global styles!
And I'll remove default paddings on certain elements like lists
which breaks lists
that css reset has some issues
lemme refine that reset to my likings
point 2, 3, 4, 6, 9 and 10 have some issues
This would be my version of the josh reset:
2- breaks stuff
3- how does this help for someone who has
reduce-motion set?
4- 1.5 is too big
6- it's missing the italic text for img
9- doesn't this cause performance issues for long paragraphs?
10- this doesn't do anything.2. just removes default layout
.3. thats true that doesnt really help
.4. 1.5 isnt too big its actually the prefered in typographie
.6. true but its just a small point
.9. idk
.10. idk
it doesn't "remove default layout" as it isn't part of layouting
4. True for print, maybe. But this is the web—most print rules don’t apply
1.5 on a title is MASSIVE
yeah except for titles
its good on p's
1.5, depending on the font, is pretty eh
This goes back to the prior idea of “know what you’re doing and do things with a purpose…and ‘someone else is doing it’ is a really bad purpose”
by the way, use code blocks
what do you mean with code blocks
oh ok
gotcha