Forums

Child themes: Best practices for styling CSS? (5 posts)

  1. 7Vyse
    Member
    Posted 1 year ago #

    Hey all,

    I'm fairly new to WP so apologies if something makes little sense in my post.

    I'm trying to make a child theme and I'm finding that the entire process is a little overwhelming. I understand CSS quite well, but given that the entire point of child themes is to assign attributes to elements that others have already written, I'm finding it hard to actually identify those elements. At first I thought Firefox's Firebug would be a great way to look at the skeleton of a theme to make edits, but the entire process is time-consuming and inefficient.

    Any recommendations? Feedback on how you all do it?

  2. Root
    Member
    Posted 1 year ago #

    For myself I think it is a great mistake, very frustrating and extremely time consuming hunting down how the parent css styles elements. I just style my stuff from a to z in the usual way. I think yr question and challenge is more about learning how css cascades and how descendant selectors work......this is not easy on a well developed css. Why not set up a small web page locally and start learning some CSS from scratch. It's faster and clearer outside the WP environment. Learning the selectors is the most important bit.

    Secondly although you are committed to child themes some practise / reorganising the CSS in the parent theme as a seperate exercise is very useful to learn how it all works. CSS has a number of different Conventions - non of which are mandatory. The default WP theme takes up 1374 lines and that is a lot of hunting. It is also broken down by sections or zones on the page rather than style functionality. You can easily break it down into more manageable chunks. I use @import a lot now which also keeps CSS reuseable.......I have quite a full WP CSS library which I can mix n match now. Lastly for practise / home use I extensively comment my own CSS. It tells me what I have done; and somehow writing the comment seems to make me think about the optimum structure.

    If u want to move into bleeding edge high end tools some of us are beginning to use SASS which is a command line CSS development tool. You can google it. Tricky to get yr head round but very cool once you get going.

    Lastly Firefox has another plugin called Edit CSS which lets u test changes and see the results on the fly before u commit them.

    HTH. Good luck.

  3. 7Vyse
    Member
    Posted 1 year ago #

    Root, this was all extremely helpful. Thank you.

  4. Root
    Member
    Posted 1 year ago #

    We were all once where you are now. I have been a CSS addict for years now though. If u need help just shout.

  5. esmi
    Theme Diva & Forum Moderator
    Posted 1 year ago #

    I don't have any problems using Firebug.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.