Question about theme styling

  • Resolved kristenfisher427

    (@kristenfisher427)


    1 year, 5 months ago

    I had a question about potential repercussions concerning how block themes and theme.json handle CSS. I’d really like to move to Twenty-Twenty-Three, but I’m concerned that the styling no longer comes from an external stylesheet. From what?I can tell, all the CSS that is generated?(through theme.json and the settings selected in the site editor UI)?are handled using inline styling or internal styling, and at times !important is added to the generated CSS. As a designer, I have a strong focus on creating sites that are?as?accessible as possible, and I know that some website visitors need to be able to override a website’s styles with their own custom style sheet. This leads me to wonder if block themes might create an issue around a website visitor’s ability to override the styles set.?I may be confused or misinformed and it may not be an issue at all (which I really hope is the case!),?but I thought I’d ask. ??

    I also wonder – is there a problem with adding a lot of CSS through either the external stylesheet or in the ‘Additional CSS’ option in the site editor? I understand WordPress is encouraging people not to rely heavily on adding CSS and instead to make style changes in the site editor or theme.json, but is there some sort of technical issue that would result if I styled Twenty-Twenty-Three in an external stylesheet??

    Thank you so much!???

Viewing 6 replies - 1 through 6 (of 6 total)

  • Those are very good questions @kristenfisher427. In principle, you can add your CSS. These can be global CSS or per-block CSS.

    You can also add CSS by using a plugin or enqueuing your own CSS stylesheet.

    They main drawback of adding your own CSS is that, because the block editor is evolving quickly, you night need to keep an eye on changes that affect the selectors you are using (and their specificity).

    If you want to learn more about CSS and block themes, you might want to check out this online session.

    I hope that helps!

    Thread Starter kristenfisher427

    (@kristenfisher427)

    Hi?@mrfoxtalbot ,

    Thank you so much for your response and the links you provided! Your answer was really helpful! ?? I’ve always had trouble trying to understand if inline styling, internal styling (where the CSS is defined in <style> in <head>), or !important?will?prevent?a website visitor?from overriding?the styles with their own custom stylesheet. Just to confirm I’m understanding?correctly, a website visitor in theory should be able to override the styles with their own custom stylesheet so long as the web designer adds CSS via global styles, per-block CSS, and/or a style.css file, since the issue of styles not being able to be overridden only comes in when the Site Editor adds !important to the CSS? Also, making changes to theme.json in a child theme should not inhibit a website visitor’s custom stylesheet, correct?

    Also, I understand the potential downside to adding CSS since the block editor is rapidly developing. However, do you think this would be an issue if I added CSS through per-block styles? What I found very interesting in a WordPress tutorial is that a CSS selector doesn’t have to be provided when adding per-block styles (if I understand correctly). For instance, if I want to change the paragraph color, I can add a per-block style specifically to the paragraph block and write:

    color: red;

    and it takes effect, even without me supplying a CSS selector in my code. Perhaps this might prevent a problem in the future with selectors and specificity as the block-editor continues to develop?

    CSS selector doesn’t have to be provided when adding per-block styles (if I understand correctly)

    That’s correct!

    Perhaps this might prevent a problem in the future

    I am not 100% sure but that’s my impression too: Adding per-block styles should create fewer issues in future updates.

    Just to confirm I’m understanding?correctly, a website visitor in theory should be able to override the styles with their own custom stylesheet??

    This is always the case, as custom/local stylesheets take priority over those in the browser. I have never been too worried about visitors having the need to overwrite styles so I am curious as to what scenarios or issues you have in mind. Could you share a little bit more background?

    Thread Starter kristenfisher427

    (@kristenfisher427)

    Hi?@mrfoxtalbot ,

    Absolutely! So in certain cases, website visitors?with?visual impairments need a particular color combination or font-size to be able to read web content easily.?In those cases,?they’d use a custom style sheet?to meet their personalized needs. ??

    That’s a relief to hear! I’ve heard such differing opinions online – some say inline styling overrides website visitor’s custom style?sheets, others say just !important declarations override it…it’s been hard to make heads or tails of the issue, so I appreciate you taking the time to clarify the matter for me. ??

    I had a question about potential repercussions concerning how block themes and theme.json handle CSS.?

    So in certain cases, website visitors?with?visual impairments need a particular color combination or font-size to be able to read web content easily.?In those cases,?they’d use a custom style sheet?to meet their personalized needs.

    Hi @kristenfisher427 thank you for providing additional information, in simpler terms how the block themes work or how the files are structured shouldn’t affect the accessibility of your site. Additionally, there is an article on Block Theme accessibility:

    https://developer.www.ads-software.com/themes/block-themes/accessibility/

    Also, themes you find on the WP.org theme repository go through an accessibility test so for default themes you should be all set. In the event that there is an issue, this can be reported for the developers to take a look.

    Thread Starter kristenfisher427

    (@kristenfisher427)

    Hi @thelmachido ,

    Thank you for your response and the information and resources you provided! I?really?appreciate your time and assistance! ??

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Question about theme styling’ is closed to new replies.