Recent searches
Search options
@brianb@fosstodon.orgHow do you go about a #CSS cleanup? This is not a redesign - more of an audit and rewrite to consolidate selectors that have sprawled into difficult to manage territories.
Any strategies and tips appreciated.
@brianb I guess I'd first focus on figuring out the most common layout patterns, as well as cleaning up the related HTML structure while at it. This should help identifying and throwing out a lot of unnecessary CSS.
For example old styles usually do spacing with margins & padding where one should now be using flex or grid with gaps.
After that it should be easier to sort out which one of the remaining old CSS handle the more edge cases and see if there is something to unify there.
@brianb Also if relevant make sure that what you come up with can be sold to other team members and that they find the new ways of working easy and convenient.
The worst thing is to make a new system nobody wants to use, or which doesn't click to them and then they doodle their own solutions all over again.
In the end poor, messy, or convoluted CSS is usually a cultural thing rather than a technical issue.
@brianb Would love to find out what you end up doing (maybe a good blog post candidate). I was working on a site for a client and realized how bad my CSS organization has been since I've just been slapping minor fixes in
@brianb I am also very interested in this, I find my CSS getting very messy constantly, and I'd love some pointers on making things nicer
One tiny thing I've started doing is compacting some properties to a single line, like width and height, it just makes it a bit nicer to read though
just the difference of
```css
{
width: 100px;
height: 100px;
}
```
vs
```css
{
width:100px; height:100px;
}
```
@brianb Neigh impossible, I tend to just go through it and anything I recognise as removed I get rid of it. You could go through all your HTML and take all the classes and id's and compare. There are some sites that do this but only one page at a time.
@brianb my solution is probably too ?whatever?, but you asked for any 
advice. It’s based on #emacs #orgmode
https://pjs64.netlify.app/2205/04#orge2443be
It avoids less or sass overhead and offers intrinsic documentation